title: Show or Hide a particular element in react
body: <p>I have to show list of faqs and I need to hide the answers of the questions. When I click on the question, the answer for that particular question need to be shown. My problem is, I have a bunch of questions and when i click the button, it will show all of the answer instead of the specific answer to that question.</p>
  
  <pre><code>class Faqs extends Component {
    constructor(props){
      super(props);
      this.state = {
        isHidden: true
      }
    }
    toggleHidden () {
      this.setState({
        isHidden: !this.state.isHidden
      })
    }
  render() {
          return (
              &lt;div&gt;
                 &lt;span onClick={() =&gt; this.toggleHidden()}&gt;&lt;strong&gt;This is the question&lt;/strong&gt;&lt;/span&gt;
                 {!this.state.isHidden &amp;&amp; &lt;p&gt;Answer for the question&lt;/p&gt;} &lt;br/&gt;
  
                 &lt;span onClick={() =&gt; this.toggleHidden()}&gt;&lt;strong&gt;Question2&lt;/strong&gt;&lt;/span&gt;
                 {!this.state.isHidden &amp;&amp; &lt;p&gt;Answer2&lt;/p&gt;} &lt;br/&gt;
                 &lt;hr&gt;&lt;/hr&gt;            
              &lt;/div &gt;
          )
      }
  }
  </code></pre>