checked box need to be click 2 time to make it check i have tried with onclick as well it is giving same behaviour i need to disable button oncheck

Question

**react js ** what I want is when i check any checkbox from the table in the particular button gets disabled but i have to click the checkbox two times to make it check i have also tried with onClick it is also giving the same output Please help me i am get the data through api call form localost only in useEffect and storing the data in a state Array with addon key to make checkbox checked and button disabled and the state checked is to toggel the value of checkbox and button; But the only problem is User have to click it 2 times i am not able to figure out

const Table1 = () => {
const [supervisors, setSupervisors] = useState([]);
const [checked, setChecked] = useState(false);
useEffect(() => {
const fetchTableList = async () => {
  const { data } = await axios("http://localhost:4000/users");
  let newData = data.map((item) => {
    item.checked = false;
    item.disabled = false;
    return item;
  });

  setSupervisors(newData);
};
fetchTableList();
}, []);

console.log(supervisors);

return (
<div className="table-component" style={{ minHeight: "91vh" }}>
  <h2 className="main-heading text-center">Supervisor Mapping</h2>
  <Table striped bordered hover className="table text-center">
    <thead className="heading">
      <tr style={{ fontSize: "1.125rem" }}>
        <th className="table-heading">OID</th>
        <th className="table-heading">Supervisor </th>
        <th className="table-heading">Title</th>
        <th className="table-heading">Project</th>
        <th className="table-heading">Industry</th>
        <th className="table-heading">Supervisee</th>
        <th className="table-heading">Receiver</th>
        <th className="table-heading">Actions</th>
      </tr>
    </thead>
    <tbody>
      {supervisors.map((item, index) => (
        <tr key={item.supervisorId} style={{ fontSize: "0.938rem" }}>
          <td>{item.supervisorId}</td>
          <td className="mx-5">{item.supervisor} </td>
          <td>{item.title}</td>
          <td>{item.project}</td>
          <td>{item.industry}</td>
          <td
            style={
              item.supervisee.length > 5
                ? { backgroundColor: "red", color: "white" }
                : item.supervisee.length > 1
                ? { backgroundColor: "yellowgreen", color: "white" }
                : { backgroundColor: "#FFD580", color: "white" }
            }
          >
            {item.supervisee.length}{" "}
          </td>
          <td>
            {" "}
            <input
              className="checkBox"
              type="checkbox"
              onChange={() => {
                setChecked(!checked);
                item.checked = checked;
              }}
              checked={item.checked}
            />
          </td>
          <td>
            <Button
              className="fas fa-eye"
              disabled={item.checked}
              id={index}
              data-id={item.supervisorId}
              data-name={item.supervisor}
            ></Button>
          </td>
        </tr>
      ))}
    </tbody>
  </Table>
</div>
)}

Answer 1

Do not mutate the state directly.

onChange={() => {
  setChecked(!checked);
  item.checked = checked; //
}}
checked={item.checked}

Always update a clone of the state.

onChange={() => {
  // create a clone of the supervisors array 
  const newSupervisors = supervisors.slice(0);

  // mutate the cloned array
  newSupervisors[index].checked = !item.checked;

  // replace the state with the mutated clone
  setSupervisors(newSupervisors);
}}

This is not necessary.

const [checked, setChecked] = useState(false);

Answer 2

This answer assumed the source was postgres syntax, not sql-server, due to the incorrect tag of the question.

SQL identifiers and key words must begin with a letter (a-z, but also letters with diacritical marks and non-Latin letters) or an underscore (_). Subsequent characters in an identifier or key word can be letters, underscores, digits (0-9), or dollar signs ($).