title: React Js custom accordion, open one item at the time
body: <p>I have an accordion in React formed of a <code>row</code> component which is looped inside a <code>body</code> parent component. In the <code>row</code> I'm toggling the state <code>showDetails</code> to show/hide the <code>details</code> for each row, effectively opening the accordion item. But, since the state is for each row, how do I close one accordion item when I open another one?</p>
  
  <p>Body:</p>
  
  <pre><code>export default class Body extends React.Component {
    render() {
      const {modelProps, showInfo, linkedRow} = this.props;
      return (
        &lt;div className="c-table__body"&gt;
          {this.props.model.map(
            (subModel, i) =&gt;
              linkedRow ?
                &lt;LinkedRow
                  key={`${i}`}
                  model={subModel}
                  modelProps={modelProps}
                /&gt;
                :
                &lt;Row
                  key={`${i}_${subModel.username}`}
                  model={subModel}
                  modelProps={modelProps}
                  showInfo={showInfo}
                  handleStatusChanged={this.props.handleStatusChanged}
                /&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Row:</p>
  
  <pre><code>class Row extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        userId: '',
        showDetails: false,
        showModal: false,
        status: '',
        value: '',
        showInfo: false
      };
        render() {
          const { model, modelProps, showInfo } = this.props;
          return (
            &lt;div className="c-table__row"&gt;
              &lt;div className="c-table__row-wrapper"&gt;
                {modelProps.map((p, i) =&gt; (
                  &lt;div className={`c-table__item ${this.isStatusCell(model[p]) ? model[p] : p}`} key={i}&gt;{this.isStatusCell(model[p]) ? this.toTitleCase(model[p]) : model[p]}&lt;/div&gt;
                ))}
  
                {showInfo ? (
                  &lt;div className="c-table__item c-table__item-sm"&gt;
                    &lt;a
                      name="view-user"
                      onClick={this.showDetailsPanel}
                      className={this.state.showDetails ? 'info showing' : 'info'}
                    &gt;
                      &lt;Icon yicon="Expand_Cross_30_by_30" /&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                ) : (
                  ''
                )}
              &lt;/div&gt;
              {this.state.showDetails ? (&lt;ConnectedDetails user={model} statusToggle={this.handleStatusChange}/&gt;) : null}
            &lt;/div&gt;
          );
        }
  
  }
  
  export default Row;
  </code></pre>
  
  <p>Not really sure how to approach this, maybe something in the <code>body</code> that check is there's any <code>row</code> open according to the <code>showDetails</code> state in the rows?</p>
  
  <p>Thanks in advance</p>