Accepted answer

Each of your expandable panels uses the same single open state to determine whether it should be expanded or not, that is why they all open at once. The easiest solution here is for each panel to have its own state.

Ideally, you want to extract the JSX from your map's return statement to separate component presenting a single student's panel, let's say StudentPanel, pass the student object as prop and move the open state and the toggle function to that component as well.

UPDATE: You'd have something like this:

class StudentPanel extends React.Component {
  state = {
    open: false

  togglePanel = e => {
    this.setState(prevState => ({ open: ! }))

  render() {
    const { student } = this.props;

    return (
      <div className = "student-container" key = {}>
        // (...) rest of JSX

In render of your App you'd have:

(...).map(student => <StudentPanel student={student} />)

and the open property and togglePanel can be removed from App component completely.

Related Query

More Query from same tag