title: How to set state properly in react js
body: <p>I have 2 react components -</p>
  <pre><code>import React, {Component} from 'react'
  import './App.css';
  import ContactCard from './components/ContactCard'
  class App extends Component {
   
    render() { 
      return ( 
        &lt;div className=&quot;App-header&quot;&gt;
        &lt;ContactCard name=&quot;hi 1&quot; age={36} email=&quot;hu@yahoo.com&quot;/&gt;
        &lt;ContactCard name=&quot;hi 2&quot; age={67} email=&quot;hi@yahoo.com&quot;/&gt;
        &lt;ContactCard name=&quot;hi 2&quot; age={42} email=&quot;he@yahoo.com&quot;/&gt;
      &lt;/div&gt;
       );
    }
  }
   
  export default App;
  
      import React, { Component } from &quot;react&quot;;
  class ContactCard extends Component {
    state = {
      showAge: false,
    };
  
    setAge = () =&gt; {
      this.setState({
        showAge: !this.state.showAge,
      });
    };
    render() {
      return (
        &lt;div className=&quot;contactCard&quot;&gt;
          &lt;div className=&quot;userDetails&quot;&gt;
            &lt;h2&gt;Name: {this.props.name}&lt;/h2&gt;
            &lt;p&gt;Email: {this.props.email}&lt;/p&gt;
            &lt;button onClick={this.state.setAge}&gt;Show Age&lt;/button&gt;
            {this.state.showAge &amp;&amp; &lt;p&gt;Age: {this.props.age}&lt;/p&gt;}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ContactCard;
  </code></pre>
  <p>Toggle button is not working. i have set the state before render method. its not mandatory to set the state in the constructor.</p>
  <p>Now the error is gone but still toggle button not working.</p>
  <p>Whats going wrong?</p>