title: React: Limit action to a single component
body: <p>This is a container:</p>
  
  <pre><code>render() {
      return (
        &lt;div&gt;
          &lt;ul className="list-group" id="contact-list"&gt;
            {this.returnContactList().map(
              (contact) =&gt;
                &lt;li key={contact.date.N} className="list-group-item"&gt;
                  &lt;ContactCard contact={contact} onFormSubmit={this.handleSubmit} summaryHidden={this.state.summaryHidden} /&gt;
                &lt;/li&gt;
            )}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>This is what I have as a component:</p>
  
  <pre><code>import React from 'react';
  import '../Contacts.css';
  const ContactCard = ({ contact, onFormSubmit, summaryHidden }) =&gt; {
  
      return (
          &lt;div&gt;
              &lt;button onClick={onFormSubmit}&gt;submit&lt;/button&gt;
              &lt;div style={{ display: summaryHidden ? 'block' : 'none' }}&gt;
                  Summary
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default ContactCard;
  </code></pre>
  
  <p>This renders list of contacts. But when I click button, the text <code>Summary</code> gets applied to all components. I want to limit it to a single component only. How to do that?</p>