CODEWITHSUNDEEP
reactjs
Jeyanth Kanagaraj
Jeyanth Kanagaraj

Reputation: 271

Change Image OnMouseOver a div React

Below is my code. I have done the part of changing an image, onmouseover a div. But, when i mouseover in one div, the images in the other div's also changes. I want only current div image should change. How, can i achieve that? or is there any simple way, where i can achieve that?

Thanks in advance

class VolBon extends Component {

  constructor(props) {
    super(props);


  this.state = {
      img: require('../../../assets/images/orange/org-org.svg'),
      imgOne: require('../../../assets/images/orange/opp-org.svg'),
      imgTwo: require('../../../assets/images/orange/tra-org.svg'),
      imgThree: require('../../../assets/images/orange/ach-org.svg')
    };
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseOut = this.handleMouseOut.bind(this);
  }

    handleMouseOver() {
      this.setState({
        img: require('../../../assets/images/white/org-whi.svg'),
        imgOne: require('../../../assets/images/white/opp-whi.svg'),
        imgTwo: require('../../../assets/images/white/tra-whi.svg'),
        imgThree: require('../../../assets/images/white/ach-whi.svg')
      });
    }

    handleMouseOut() {
      this.setState({
        img: require('../../../assets/images/orange/org-org.svg'),
        imgOne: require('../../../assets/images/orange/opp-org.svg'),
        imgTwo: require('../../../assets/images/orange/tra-org.svg'),
        imgThree: require('../../../assets/images/orange/ach-org.svg')
      });
    }


  render() {
    return (
    <div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.img} />
</div>
<div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.imgOne} />
</div>
<div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.imgTwo} />
</div>
<div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
     <img src={this.state.imgThree} />
</div>
  )  
}

Upvotes: 0

Views: 1553

Answers (1)

Mayank Bansal
Mayank Bansal

Reputation: 2085

This is happening because you are updating the value of all the state in the same function. One way to achieve your goal is by identifying each div by a unique identifier

handleMouseOver(val) {
  if(val === 0){
    this.setState({
        img: require('../../../assets/images/white/org-whi.svg')
    });
  } else if(val === 1){
     this.setState({
        imgOne: require('../../../assets/images/white/opp-whi.svg')
    });
  } else if(val === 2){
     this.setState({
        imgTwo: require('../../../assets/images/white/tra-whi.svg')
     });
  } else{
     this.setState({
        imgThree: require('../../../assets/images/white/ach-whi.svg')
     });
  }
}

render() {
    return (
        <div onMouseOver={() => this.handleMouseOver(0)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.img} />
        </div>
        <div onMouseOver={() => this.handleMouseOver(1)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.imgOne} />
        </div>
        <div onMouseOver={() => this.handleMouseOver(2)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.imgTwo} />
        </div>
        <div onMouseOver={() => this.handleMouseOver(3)} onMouseOut={this.handleMouseOut}>
            <img src={this.state.imgThree} />
        </div>
    )  
}

Upvotes: 1

Related Questions