CODEWITHSUNDEEP
javascriptreactjs
Rohit Verma
Rohit Verma

Reputation: 3785

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?

Upvotes: 1

Views: 365

Answers (1)

Shadab
Shadab

Reputation: 1347

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>

Upvotes: 1

Related Questions