Why will only one of two almost identical toggle functions actually change the state of a property?

I wrote ToggleDisplayMenu first and it works perfectly. I tried writing ToggleMelkesjef and ToggleOrdenselev the exact same way but they do not work. They do get called on their respective button clicks, just the values of isMelkesjef and isOrdenselev do not seem to change.

  //Function to toggle displaymenu
  function ToggleDisplayMenu(name) {
    setStudents(
      students.map((student) =>
        student.name === name
          ? { ...student, isDisplayMenu: !student.isDisplayMenu }
          : student
      )
    );
  }
  //Function to toggle ordenselev
  function ToggleOrdenselev(name) {
    setStudents(
      students.map((student) =>
        student.name === name
          ? { ...student, isOrdenselev: !student.isOrdenselev }
          : student
      )
    );
  }
  //Function to toggle melkesjef
  function ToggleMelkesjef(name) {
    setStudents(
      students.map((student) =>
        student.name === name
          ? { ...student, isMelkesjef: !student.isMelkesjef }
          : student
      )
    );
  }

Full code:

import "./styles.css";
import { useState } from "react";

let studentnames = [
  {
    name: "Colin",
    birthday: 1.01
  },
  {
    name: "Eskil",
    birthday: 1.01
  },
  {
    name: "Ane",
    birthday: 1.01
  },
  {
    name: "Adrian",
    birthday: 1.01
  },
  {
    name: "Eline",
    birthday: 1.01
  },
  {
    name: "Aurora",
    birthday: 1.01
  },
  {
    name: "Mia",
    birthday: 1.01
  },
  {
    name: "Ella",
    birthday: 1.01
  },
  {
    name: "Magnus",
    birthday: 1.01
  },
  {
    name: "Marin",
    birthday: 1.01
  }
];
studentnames.map(
  (student) => (
    (student.isMelkesjef = false),
    (student.isOrdenselev = false),
    (student.isDisplayMenu = false)
  )
);

function Studentlist(props) {
  const { studentnames } = props;

  const [students, setStudents] = useState(studentnames);

  //Function to toggle displaymenu
  function ToggleDisplayMenu(name) {
    setStudents(
      students.map((student) =>
        student.name === name
          ? { ...student, isDisplayMenu: !student.isDisplayMenu }
          : student
      )
    );
  }
  //Function to toggle ordenselev
  function ToggleOrdenselev(name) {
    setStudents(
      students.map((student) =>
        student.name === name
          ? { ...student, isOrdenselev: !student.isOrdenselev }
          : student
      )
    );
  }
  //Function to toggle melkesjef
  function ToggleMelkesjef(name) {
    setStudents(
      students.map((student) =>
        student.name === name
          ? { ...student, isMelkesjef: !student.isMelkesjef }
          : student
      )
    );
  }
  //Return the actual html element
  return students.map((student) => (
    <div
      className="studentbox"
      id={student.name}
      onClick={() => ToggleDisplayMenu(student.name)}
    >
      {student.isDisplayMenu ? (
        <>
          <button onClick={() => ToggleMelkesjef(student.name)}>
            {student.isMelkesjef ? "Fjern melkesjef" : "Bli melkesjef"}
          </button>
          <button onClick={() => ToggleOrdenselev(student.name)}>
            {student.isOrdenselev ? "Fjern ordenselev" : "Bli Ordenselev"}
          </button>
          <button>{student.isFravær ? "Fjern fravær" : "Bli fravær"}</button>
        </>
      ) : (
        <>
          <h2>{student.name}</h2>
          <h3>{student.birthday}</h3>
        </>
      )}
    </div>
  ));
}

export default function App() {
  return (
    <div className="container">
      <Studentlist studentnames={studentnames}></Studentlist>
    </div>
  );
}

Using console.log and using the ? operator I've determined everything is working except the isMelkesjef and isOrdenselev values do not change, despite the almost identical ToggleDisplayMenu function working just fine.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/jy5cm7K