How to change the background colors in React with a usestate

Question

Good afternoon,

Can please someone explain me the following.

there is a piece of code i dont understand and which was recomended to me. In order to style the colors from a text while pressing a checkbox, i created following code. I used an usestate and set it to false and statehook for the color.

 const [isChecked, setIsChecked] = useState(false);
  const [textStyle, setTextStyle] = useState({ color: 'black' });

  const handleCheckboxClick = () => {
    setIsChecked(!isChecked);
    setTextStyle({ color: isChecked ? 'black' : 'red' });
  };

  // change the color of the background

  return (
    <>
      <input type="checkbox" style={bodystyle} />
      <div>
        <h1>Todo List</h1>
        <input type="text" value={value} onChange={handleChange} />
        <button onClick={addTodo}>Add Todo</button>
        <ul>
          {todo.map((item, index) => (
            <li key={index} style={textStyle}>
              <input type="checkbox" onClick={handleCheckboxClick} />
              {item} <button onClick={() => deleteTodo(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

What i dont understand, is this line specifically setTextStyle({ color: isChecked ? 'black' : 'red' }); my usestate is false in ischecked. And when i click the checkbox it will turn to true. so the color shoudl stay black? When i execute it and try it is the oppisite. Can someone please explain me that. Step by step?

i tried the change the states or with a diffrent way. Like implementing it in css. But this was the only thing working and i dont understand why.

[Here's some documentation on how to create a React snippet](https://meta.stackoverflow.com/a/338538/1377002). — Andy, Feb 04 '23 at 12:16
Thaaaank youuuuu very much! You aaanswerd my question soooooo precisly, that i understandt it now! :/ — Davidino, Feb 04 '23 at 12:18
Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — Henry Woody, Feb 04 '23 at 12:25
Also you don't need `isChecked` and `textStyle`. You should just have `isChecked` and define text style without using state. — Henry Woody, Feb 04 '23 at 12:26
@Davidino the point of the snippet is so we can help debug runnable code. At the moment there's a lot of code (like the handlers) missing from your question which makes tracing the problem difficult. Try making a [mcve]. — Andy, Feb 04 '23 at 12:37

score 0 · Answer 1 · answered Feb 04 '23 at 12:26

0

The problem here is React state is not asynchronous so you can do it like that :

 const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxClick = () => {
    setIsChecked(!isChecked);
  };

  return (
    <>
      <input type="checkbox" style={bodystyle} />
      <div>
        <h1>Todo List</h1>
        <input type="text" value={value} onChange={handleChange} />
        <button onClick={addTodo}>Add Todo</button>
        <ul>
          {todo.map((item, index) => (
            <li key={index} style={{color: isChecked ? 'black' : 'red'}}>
              <input type="checkbox" onClick={handleCheckboxClick} />
              {item} <button onClick={() => deleteTodo(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

answered Feb 04 '23 at 12:26

Ons belkhouja

136
8

thank you ! But same question here. Before the checkbox is clicked the state of ischecked is falese,right? So in order to swithc to red. In the ternary operater in the li eleemnt.,red is excuted when isChecked is false? in handleCheckboxClick we set isChekced to true or not ? So that is the thing i dont understand :/ – Davidino Feb 04 '23 at 12:32
becaouse i wnt it to be red when the checkbox is clicked and black when its normal. Sorry i forgot to mention that – Davidino Feb 04 '23 at 12:35
if you want it to be black when it's not clicked and red when it's clicked you need to change the order to that isChecked ? 'red' : 'black' so when isChecked is true the color is going to be red and when it's false it's going to be black – Ons belkhouja Feb 04 '23 at 12:48

How to change the background colors in React with a usestate

1 Answers1