How do I manage the state of each row in react js?

I'm mapping through data from a db into a html table where each has row has a toggle button to mark if they're absent or not. However I'm not sure how to save the state of each row's toggle button since they're all going to be different.

function Component() {
  const [students, setStudents] = useState([]);
  const [absent, setAbsent] = useState(false);
  const updateAbsent = () => {
    console.log(absent);
  };

  return (
    <div className="attendance-today-container">
      <h1>Daily attendance</h1>
      <table ref={table}>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Absent?</th>
        </tr>
        {students.map((student, i) => {
          return (
            <tr>
              <td key={i}>{student.firstName}</td>
              <td>{student.lastName}</td>
              <td>
                <label class="switch">
                  <input
                    type="checkbox"
                    onClick={() => {
                      setAbsent(!absent);
                    }}
                  />
                  <span class="slider round"></span>
                </label>
              </td>
            </tr>
          );
        })}
      </table>
      <button onClick={updateAbsent}>Send</button>
    </div>
  );
}

Solution 1:

An easy way would be to store the student data and if they are present or absent in the same state.

Each student could have an id in order to identify him easily. A function could go through the student state array and identify with the id which student was marked absent or present.

const data = [
    { id: 1, firstName: 'John', lastName: 'Doe', absent: false },
    { id: 2, firstName: 'Jane', lastName: 'Doe', absent: false },
];

const StudentList = () => {
    const [students, setStudents] = useState(data);
    const updateAbsent = () => {
        const absents = students.filter((student) => student.absent === true);
        console.log(absents);
    };
    const handleToggleAbsent = (toggleStudent) => {
        setStudents((prevStudents) =>
            prevStudents.map((student) => {
                if (student.id !== toggleStudent.id) return student;
                return { ...student, absent: !student.absent };
            })
        );
    };

    return (
        <div className="attendance-today-container">
            <h1>Daily attendance</h1>
            <table>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Absent?</th>
                    </tr>
                </thead>
                <tbody>
                    {students.map((student) => {
                        return (
                            <StudentItem
                                student={student}
                                key={student.id}
                                onToggleAbsent={handleToggleAbsent}
                            />
                        );
                    })}
                </tbody>
            </table>
            <button onClick={updateAbsent}>Send</button>
        </div>
    );
};

const StudentItem = (props) => {
    const { student, onToggleAbsent } = props;
    return (
        <tr>
            <td>{student.firstName}</td>
            <td>{student.lastName}</td>
            <td>
                <label className="switch">
                    <input
                        type="checkbox"
                        onClick={onToggleAbsent.bind(null, student)}
                    />
                    <span className="slider round"></span>
                </label>
            </td>
        </tr>
    );
};

export default StudentList;