Question 278359 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Altering checkbox state in react js

This is my code for check box in react. Its from Material-UI

  const [checkmark, setCheckMark] = useState(false);

  const [selectedRows, setSelectedRows] = useState([]);

  const toggleAllCheck = (event) => {
    console.log("before", checkmark);
    setCheckMark(!checkmark);
    console.log("after", checkmark);
    let newSelectedRows;
    if (checkmark) {
      newSelectedRows = salesRows.map((row) => row.id);
      setSelectedRows(newSelectedRows);
      console.log("selected rows", newSelectedRows);
    }
  };

As checkmark state is initially set to false, there is no check-mark in the checkbox.

After I click the component, it shows a checkmark. The toggle is because of the toggleAllCheck function.

Inside the function, first it console logs the value of checkmark as false, which is understandable. On second line it alters the value to true. Which in turn gives a check-mark in my checkbox.

Then on third line, I again console log the value for checkmark. But it gives the false reading.

So, what I am confused about is why is it still false. I have the idea, that the state update happens in next render (been troubling me in other areas as well), but then how did I get the check on my check-box without any re-render.

Also, the same checkmark values is able to get me a check on the box, although its console log shows false, but is unable to execute the if statement.

I am trying to get a hold to selectedRows, when there is tick on checkbox, but I get that only in second click when the tick is removed.

Tags:

2

Answers


  1. 0

    This case is in React’s docs:
    I’ve updated the state, but logging gives me the old value

    Keep a reference to the new state you are setting because the setX necessarily cannot update the variable:

      const [checkmark, setCheckMark] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]);

  const toggleAllCheck = (event) => {
    const nextCheckmark = !checkmark;
    setCheckMark(nextCheckmark);
    let newSelectedRows;
    if (nextCheckmark) {
      newSelectedRows = salesRows.map((row) => row.id);
      setSelectedRows(newSelectedRows);
      console.log("selected rows", newSelectedRows);
    }
  };
    Login or Signup to reply.
  2. 0

    there! In my opinion, you probably misunderstand about the life cycle.
    When you use "useState" hook, the state value can not changed instantly. So you get the value that is not changed yet and after mount the function the value changed in that time , so you must use "useEffect" that is performed whenever the desired value is changed. The referenced code like below:

    const toggleAllCheck = (event) => {
  setCheckMark(!checkmark);
}

useEffect(() => {
  let newSelectedRows;
  if (checkmark) {
    newSelectedRows = salesRows.map((row) => row.id);
    setSelectedRows(newSelectedRows);
    console.log("selected rows", newSelectedRows);
  }
}, [checkmark])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search