import React, { Component } from 'react'
      class App extends Component{
      constructor(props){
        super(props)
      
        // Initialize count state
        this.state = {show : false}
        // Bind context of 'this'
        this.handleClick = this.handleClick.bind(this)
        // Create reference of DOM object
        this.imgRef = React.createRef()
      }
      
      renderDetails() {
        return this.state.show ?
        // Accessing image details using imgRef
        <div>
        
      <p><strong>Height : </strong>
        {this.imgRef.current.clientHeight}px</p>
      
        
      <p><strong>Width : </strong>
        {this.imgRef.current.clientWidth}px</p>
      
        </div> : null
      }
      
      handleClick(){
      
        // Update state value
        this.setState({
        show : true
        })
      }
      
      render(){
        return(
        <div>
        <h3>GeeksforGeeks</h3>
        {/* Assign reference to DOM element	 */}
        <img ref={this.imgRef} src=
      'https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2-300x177.png' alt='gfg' />
        <div>
        <button onClick={this.handleClick}>Get image details</button>
        </div>
        {this.renderDetails()}
        </div>	
        )
      }
      }
      export default App
      

      Javascript language logo
      your recipe card header background
      Image Heigth and Width

      React Project

      The code in this file creates a React component that renders a Details section for a given image. The component has a few props that it uses to initialize state. In addition, it has a handleClick function that is used to handle clicking on the image. The renderDetails function accesses the state of the component to determine whether to show the Details section for the image or not.

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.