title: In the collapse panel all elements simultaneously react to the click
body: <p>In  my app, I have an array of the items in which each item has a title and additional info.<br>
  To display the info I want to make each item collapsible (toggle when clicked).<br>
  But now, when I click on one item the other items also respond, because each item listens to the state.   </p>
  
  <p>How can I make this event listen only item that I click on?</p>
  
  <p>For simplicity I've reduced my object to 3 items but in fact my json file is large and for this reason I use the map method</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// my profiles.json
  let profiles = [{"name":"John", "count": 2}, {"name":"Kitty", "count": 3}, {"name":"Ji", "count": 4}]
  
  class Main extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: this.props.profiles,
        open: false,
        expand: 'close'
      }
    }
    
    handleClick() {
      if (this.state.open) {
        this.setState({ open: false, expand: 'close' })
      } else {
        this.setState({ open: true, expand: 'open' })
      }
    }
    
    render() {
      let { data } = this.state
      const listItem = data.map((profile, index) =&gt; {
        return (
          &lt;div key={index} &gt;
            &lt;div className='profile-title' onClick={() =&gt; this.handleClick()}&gt;
              &lt;span className='name'&gt;{profile.name}&lt;/span&gt; 
            &lt;/div&gt;
            &lt;div className={`profile-content ${this.state.expand}`}&gt;
              &lt;span className='number'&gt;{profile.count}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )
      })
      return (
        &lt;div className='content'&gt;
            { listItem }
        &lt;/div&gt;
      )
    } 
  }
  
  
  const App = () =&gt; (
    &lt;div&gt;&lt;Main profiles={profiles} /&gt;&lt;/div&gt;
  )
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root')
  )</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.close {
    overflow: hidden;
    height: 0;
  }
  .open {
    height: auto;
    padding: 10px;
  }
  
  .profile-title{
    border: 1px solid;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>