onClick event on an array element javascript React

Question

I need to do a collapsible section with a list of disciplines. The disciplines are stored in an array. I wrote an onClick event but except one discipline which I clicked, I get all of them slid down. How can I apply the event to each element, so I can decide which one will be slide down?

export default class Predictions extends React.Component {
constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state={
        display: 'block',
    };
}
handleClick(e) {

    this.setState({
        display: this.state.display === 'none' ? 'block' : 'none',
    });
    console.log('click', e);
};
render() {
    return (
        <section className="l-section c-predictions" >
            <h2 className="header" >Predictions</h2>
            <div className="content">
                {this.props.disciplines.map((discipline, index) => {

                    return (
                        <div onClick={event => this.handleClick(discipline.id, event)} key={discipline.name} className="c-discipline">
                            <span className="name">{discipline.name}</span> - <span className="score">{disciplineScore(this.props.athlete.skillset, discipline.requirements)}</span>
                            <div style={this.state} className="element">
                            <p>{discipline.tags !== undefined ? discipline.tags.toString().replace(',', ', ') : ''}</p>
                            <p className="isIndividual">{discipline.isIndividual===true ? "Individual sport" : "Team sport"}</p>
                            <img src={discipline.photo}/>
                            </div>
                        </div>
                    )
                })}
            </div>
        </section>
    )
}

}

V Soren · Accepted Answer · 2018-06-01 11:30:30Z

3

You need a way to identify which element has been clicked.

Here's an example:

export default class App extends React.Component {
  state = {
    opened: true,
    selected: ''
  };

  toggleHidden = key => {
    this.setState({ opened: !this.state.opened, selected: key });
  };

  render() {
    return (
      <div>
        {arr.map((s, i) => (
          <div key={i}>
            <p>{s}</p>
            <button onClick={() => this.toggleHidden(i)}>Toggle</button>
            {!this.state.opened && this.state.selected === i && <h1>{s}</h1>}
          </div>
        ))}
      </div>
    );
  }
}

answered Jun 1, 2018 at 11:30

V Soren

3163 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

V Soren Over a year ago

Great. Enjoy :)

Joshua Majebi Over a year ago

Hi, but doesnt this use the index as the key which is not recommended.

Collectives™ on Stack Overflow

onClick event on an array element javascript React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related