How can I get image value and implement on any another div in react?

Actually I have multiple images so now I need to display clicked image on another box how can I do that in react?

My Code:-

    const imageClick = () =>{
      console.log(this.state.value);
    }


 <img src="images/1.png" onClick={()=>imageClick()} />
 <img src="images/2.png" onClick={()=>imageClick()} />
 <img src="images/3.png" onClick={()=>imageClick()} />
 <img src="images/4.png" onClick={()=>imageClick()} />

 <div className="newDiv"></div>

Not able to understand what is better way to do this?

21 thoughts on “How can I get image value and implement on any another div in react?”

  1. You want something like this :

    function imageClick(img){
      var src = img.src;
      console.log(src);
    }
    <img src="images/1.png" onClick="imageClick(this)"/>
    <img src="images/2.png" onClick="imageClick(this)"/>
    <img src="images/3.png" onClick="imageClick(this)"/>
    <img src="images/4.png" onClick="imageClick(this)"/>
    <div className="newDiv"></div>

    it will provide you source of image

    Reply
  2. Do you mean something like this?

    const imageClick = (selectedImg) =>{
      this.setState({ selectedImg }) // Save the selected image in this.state
    }
    
    <img src="images/1.png" onClick={()=>imageClick(1)} />
    <img src="images/2.png" onClick={()=>imageClick(2)} />
    <img src="images/3.png" onClick={()=>imageClick(3)} />
    <img src="images/4.png" onClick={()=>imageClick(4)} />
    
    <div className="newDiv">
      <img src={`images/${this.state.selectedImg}.png`} /> // Get the selected image from this.state
    </div>
    
    Reply

Leave a Comment