title: Show and Hide specific component in React from a loop
body: <p>I have a button for each div. And when I press on it, it has to show the div with the same key, and hide the others.
  What is the best way to do it ? This is my code </p>
  
  <pre><code>class Main extends Component {
      constructor(props) {
        super(props);
        this.state = {
          messages: [
            { message: "message1", key: "1" },
            { message: "message2", key: "2" }
            ]
        };
      }
      handleClick(message) {
       //something to show the specific component and hide the others
      }
      render() {
        let messageNodes = this.state.messages.map(message =&gt; {
          return (
          &lt;Button key={message.key} onClick={e =&gt; this.handleClick(message)}&gt;
           {message.message}
          &lt;/Button&gt;
          )
       });
       let messageNodes2 = this.state.messages.map(message =&gt; {
          return &lt;div  key={message.key}&gt;
             &lt;p&gt;{message.message}&lt;/p&gt;
             &lt;/div&gt;
       });
       return &lt;div&gt;
           &lt;div&gt;{messageNodes}&lt;/div&gt;
           &lt;div&gt;{messageNodes2}&lt;/div&gt;
              &lt;/div&gt;
      }
  }
  </code></pre>