title: how to change the state of a text with hover in reactjs?
body: <p>I am trying to change the state of A text by on mouse over on an image but the function is not working.</p>
  
  <p>I have set the state of the heading and parah in tye function but it would not working.</p>
  
  <p>export default class portfolio extends Component {</p>
  
  <pre><code>constructor(props){
      super(props);
      this.state={
  
          heading:"helo world",
          parah:""
  
      }
  
      this.handleDiscription = this.handleDiscription.bind(this);
  }
  
  handleDiscription=()=&gt;{
      this.setState={
          heading:"Reading Friends",
          parah:"what do you mean"
      }
  }
  
  
  render() {
  
      return (
          &lt;div&gt;
              &lt;div&gt;
  
                      &lt;div  className="row "&gt;
                      &lt;div className="row "&gt;
                          &lt;div  className="reading-friends" style={{textAlign:'center'}}&gt;
                              &lt;h1 className="heading" style={{fontSize:'50px',fontWeight:'bold',marginTop:'140px',marginBottom:'200px',fontFamily:"catamaran,sans-serif"}} OnClick={this.handleDiscription}&gt;{this.state.heading}&lt;/h1&gt;
                              &lt;p className="parah"&gt;{this.state.parah}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div  className="row d-flex justify-content-center"&gt;
                          &lt;div style={{textAlign:'center'}} className="opti-care"&gt;
                          &lt;h1  style={{fontSize:'50px',fontWeight:'bold',marginBottom:'200px',fontFamily:"catamaran,sans-serif"}}&gt;Opticare Solution&lt;/h1&gt;
                          &lt;p&gt;OptiCare Solution is a complete mini ERP for opticians and optometrists.&lt;br/&gt;
                               We are the first to bring such an extensive solution in the field of Optometry,&lt;br&gt;&lt;/br&gt;
                                providing features that are robust and easy to use.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="row"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div style={{marginTop:'270px'}} className="row "&gt;
  
                  &lt;div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center"&gt;
               &lt;Reading
               show={this.handleDiscription}
  
               /&gt;
  </code></pre>
  
  <p>//child component
  <a href="https://play.google.com/store/apps/details?id=com.planetreading.readingfriends" rel="nofollow noreferrer">
                      
                       </a></p>