title: React collapse row onClick
body: <p>I have data that I need to show in table, for all rows I would like to use collapse function. Now I have working code that is collapsing all rows on click, but in what way I can collapse only one already clicked?</p>
  
  <p>This is my code:</p>
  
  <pre><code>class Data extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              datas: [
                  {name: "or1", status: 11},
                  {name: "or3", status: 2},
                  {name: "or2", status: 22},
              ],
              expanded: [],
              isOpen: true,
          };
      }
  
      toogleContent(openIs) {
          this.setState({
              isOpen: !openIs
          })
      }
  
      render() {
          return (
              &lt;Table responsive&gt;
                  &lt;thead className="text-primary"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Status&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  {this.state.datas.map((data, i) =&gt; (
                      &lt;tr id={i} onClick={this.toogleContent.bind(this, this.state.isOpen)}&gt;
                          &lt;td&gt;{data.name}&lt;/td&gt;
                          &lt;td&gt;&lt;Collapse isOpen={this.state.isOpen}&gt; 
                             {data.status}&lt;/Collapse&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  ))}
                  &lt;/tbody&gt;
              &lt;/Table&gt;
          )
      }
  }
  </code></pre>