I am trying to hide and show an element based on states but it could not worked?

Question

the problem is that I am trying to hide and show elements based on states with conditional rendring but it would not worked .

I have set the state of element and pass the method in onmouseover and onmouse leave event first time it worked for one element when I repeat the same process for second element it would not worked.

  constructor(props)
  {

    super(props)

    this.state = {

      show: false,
      opticare: false
    }

    this.handleSwitch = this.handleSwitch.bind(this)
    this.leave = this.leave.bind(this)
    this.handleOpti = this.handleOpti.bind(this)
    this.handleCare = this.handleCare.bind(this)
  }

  handleSwitch = () => {
    this.setState({
      show: !this.state.switch

    })
  }
  leave = () => {

    this.setState({
      show: this.state.switch

    })

  }
  handleOpti = () => {
    this.setState({
      opticare: !this.state.opticare
    })
  }
  handleCare = () => {
    this.setState({
      opticare: this.state.opticare
    })
  }

  render()
  {
    let className = 'reading-friends'
    if (this.state.show) {
      className = 'reading-friends visible'
    } else if (!this.state.show) {
      className = 'reading-friends invisible'
    }

    let addClass = 'opti-care'
    if (this.state.opticare) {
      addClass = 'opti-care visible'
    } else if (!this.state.opticare) {
      addClass = 'opti-care invisible'
    }

    return (
      <div>
        <div>
          <div className="row ">
            <div className="row ">
              <div className={className} style={{ textAlign: 'center' }}>
                <h1 className="heading" style={{
                  fontSize: '50px',
                  fontWeight: 'bold',
                  marginTop: '140px',
                  marginBottom: '200px',
                  fontFamily: 'catamaran,sans-serif'
                }}>Reading Friends</h1>
                <p className="parah">Reading Friends is designed to engage young children by
                  promoting interactive learning through games, puzzles,<br/>
                  and music. Appealing to children's instinctual inquisitiveness,
                  Reading Friends brings education to life with exciting graphics,<br/>
                  spirited sound and creative activities
                  that help them learn to read, while entertaining them through play.</p>
              </div>
            </div>
          </div>
          <div className="row d-flex justify-content-center">
            <div style={{ textAlign: 'center' }} className={addClass}>
              <h1 style={{
                fontSize: '50px',
                fontWeight: 'bold',
                marginBottom: '200px',
                fontFamily: 'catamaran,sans-serif'
              }}>Opticare Solution</h1>
              <p>OptiCare Solution is a complete mini ERP for opticians and optometrists.<br/>
                We are the first to bring such an extensive solution in the field of Optometry,<br></br>
                providing features that are robust and easy to use.</p>
            </div>
          </div>
          <div className="row"></div>
        </div>
        <div style={{ marginTop: '270px' }} className="row ">

          <div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">

            <a href="https://play.google.com/store/apps/details?id=com.planetreading.readingfriends">
              <img onMouseOut={this.leave} onMouseOver={this.handleSwitch}
                   src="http://newstate.io/wp-content/uploads/2019/07/work-reading-friends-colored.png"
                   alt="" class="we-do-img we-work-img img-responsive grayscale"/>
            </a>

          </div>
          <div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">
            <img onMouseOut={this.handleCare} onMouseOver={this.handleOpti}
                 src="http://newstate.io/wp-content/uploads/2019/07/work-opticare-colored.png"
                 alt="" class="we-do-img we-work-img img-responsive grayscale"/>
          </div>
        </div>
      </div>
    )
  }

Answer 1

In your leave and handleSwitch function, you are using switch property of the state instead of show property. Also, there is no need to use bind if you are using arrow functions.

Answer 2

There's no need to create two separate functions for both onMouseEnter and onMouseLeave. You can use a single function for both event-listeners.

Just create two functions, one for each state-value you want to toggle. In the code below, we'll use handleSwitch and handleOpti.

See working sandbox: https://codesandbox.io/s/naughty-cookies-4mcwt

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      opticare: false
    };

  }

  handleSwitch = () => {
    this.setState({
      show: !this.state.show
    });
  };

  handleOpti = () => {
    this.setState({
      opticare: !this.state.opticare
    });
  };

  render() {
    let className = "reading-friends";
    if (this.state.show) {
      className = "reading-friends visible";
    } else if (!this.state.show) {
      className = "reading-friends invisible";
    }

    let addClass = "opti-care";
    if (this.state.opticare) {
      addClass = "opti-care visible";
    } else if (!this.state.opticare) {
      addClass = "opti-care invisible";
    }

    return (
      <div>
        <div>
          <div className="row ">
            <div className="row ">
              <div className={className} style={{ textAlign: "center" }}>
                <h1
                  className="heading"
                  style={{
                    fontSize: "50px",
                    fontWeight: "bold",
                    marginTop: "140px",
                    marginBottom: "200px",
                    fontFamily: "catamaran,sans-serif"
                  }}
                >
                  Reading Friends
                </h1>
                <p className="parah">
                  Reading Friends is designed to engage young children by
                  promoting interactive learning through games, puzzles,
                  <br />
                  and music. Appealing to children's instinctual
                  inquisitiveness, Reading Friends brings education to life with
                  exciting graphics,
                  <br />
                  spirited sound and creative activities that help them learn to
                  read, while entertaining them through play.
                </p>
              </div>
            </div>
          </div>
          <div className="row d-flex justify-content-center">
            <div style={{ textAlign: "center" }} className={addClass}>
              <h1
                style={{
                  fontSize: "50px",
                  fontWeight: "bold",
                  marginBottom: "200px",
                  fontFamily: "catamaran,sans-serif"
                }}
              >
                Opticare Solution
              </h1>
              <p>
                OptiCare Solution is a complete mini ERP for opticians and
                optometrists.
                <br />
                We are the first to bring such an extensive solution in the
                field of Optometry,
                <br />
                providing features that are robust and easy to use.
              </p>
            </div>
          </div>
          <div className="row" />
        </div>
        <div style={{ marginTop: "270px" }} className="row ">
          <div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">
            <a href="https://play.google.com/store/apps/details?id=com.planetreading.readingfriends">
              <img
                onMouseOut={this.handleSwitch}
                onMouseOver={this.handleSwitch}
                src="http://newstate.io/wp-content/uploads/2019/07/work-reading-friends-colored.png"
                alt=""
                class="we-do-img we-work-img img-responsive grayscale"
              />
            </a>
          </div>
          <div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">
            <img
              onMouseOut={this.handleOpti}
              onMouseOver={this.handleOpti}
              src="http://newstate.io/wp-content/uploads/2019/07/work-opticare-colored.png"
              alt=""
              class="we-do-img we-work-img img-responsive grayscale"
            />
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);