[Solved]-How can I make only one list item expand when a button is clicked in React (no hooks)?-Reactjs

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: !prevState.open }))
  }

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

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

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.