CODEWITHSUNDEEP
javascriptreactjs
Mauro74
Mauro74

Reputation: 4826

React Js custom accordion, open one item at the time

I have an accordion in React formed of a row component which is looped inside a body parent component. In the row I'm toggling the state showDetails to show/hide the details 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?

Body:

export default class Body extends React.Component {
  render() {
    const {modelProps, showInfo, linkedRow} = this.props;
    return (
      <div className="c-table__body">
        {this.props.model.map(
          (subModel, i) =>
            linkedRow ?
              <LinkedRow
                key={`${i}`}
                model={subModel}
                modelProps={modelProps}
              />
              :
              <Row
                key={`${i}_${subModel.username}`}
                model={subModel}
                modelProps={modelProps}
                showInfo={showInfo}
                handleStatusChanged={this.props.handleStatusChanged}
              />
        )}
      </div>
    );
  }
}

Row:

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 (
          <div className="c-table__row">
            <div className="c-table__row-wrapper">
              {modelProps.map((p, i) => (
                <div className={`c-table__item ${this.isStatusCell(model[p]) ? model[p] : p}`} key={i}>{this.isStatusCell(model[p]) ? this.toTitleCase(model[p]) : model[p]}</div>
              ))}

              {showInfo ? (
                <div className="c-table__item c-table__item-sm">
                  <a
                    name="view-user"
                    onClick={this.showDetailsPanel}
                    className={this.state.showDetails ? 'info showing' : 'info'}
                  >
                    <Icon yicon="Expand_Cross_30_by_30" />
                  </a>
                </div>
              ) : (
                ''
              )}
            </div>
            {this.state.showDetails ? (<ConnectedDetails user={model} statusToggle={this.handleStatusChange}/>) : null}
          </div>
        );
      }

}

export default Row;

Not really sure how to approach this, maybe something in the body that check is there's any row open according to the showDetails state in the rows?

Thanks in advance

Upvotes: 2

Views: 4117

Answers (1)

Doron Brikman
Doron Brikman

Reputation: 2584

The approach is to lift the state of which <Row /> is open to the <Body /> component. Also the method that switch between opened <Row /> is on the <Body /> component.

toggleOpen = (idx) => {
 this.setState({ openRowIndex: idx });
}

then when you rendered your <Row />s you can pass a prop isOpen:

<Row
   key={`${i}_${subModel.username}`}
   model={subModel}
   modelProps={modelProps}
   showInfo={showInfo}
   handleStatusChanged={this.props.handleStatusChanged}
   isOpen={this.state.openRowIndex === i}
   onToggle={_ => this.toggleOpen(i)}
/>

Upvotes: 4

Related Questions