[Solved]-how to make only one list item expand when clicked- react hooks-Reactjs

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}