score:1

Accepted answer

You set open for all items in list. You must narrow it to the currently selected student ids. So you need an array that will hold all opened ids.

const [open, setOpen] = useState([])

  const toggleOpen= (id) => {
    if (open.includes(id)) {
     setOpen(open.filter(sid => sid !== id))
    } else {
     let newOpen = [...open]
     newOpen.push(id)
     setOpen(newOpen)
    }
  }

  <button className="expand-btn" onClick={() => toggleOpen(student.id)}>{open.includes(student.id) ? '-' : '+'}</button>
       

and then

            {open.includes(student.id) ? (
              <ul className="grades-list">
                {student.grades.map((grade, index) => <li key={grade.id}>Test {index + 1}: {grade}%</li>)}
              </ul>) : null}

Related Query

More Query from same tag