useState with a boolean

Question

i have a react next.js project and a form. i want to use a slider in my form. by the way i use semantic ui react. i have one useState hook with the following input:

function CreateTicket() {
  const [ticket, setTicket] = useState({
    name: "",
    description: "",
    media: "",
    priority: false
  });
....

and an handleChange, handleSubmit and an handleToggle function. When i submit the form in my console.log it dont set the value of priority back to false.

      <Checkbox
        style={{ padding: "1rem" }}
        label="Important?"
        name="priority"
        toggle
        onChange={handleToggle}
      />

  const handleToggle = event => {
    let { priority } = event.target;
    setTicket(prevState => ({ ...prevState, priority: !priority }));
  };

console.log ->

after page refresh:

{name: "", description: "", media: "", priority: false}

after: toggle

{name: "", description: "", media: "", priority: true}

after a second toggle

{name: "", description: "", media: "", priority: true}

What do i wrong?

Answer 1

You need to destructure priority from prevState, not event.target:

const handleToggle = event => {
  setTicket(({ priority, ...prevState }) =>
    ({ ...prevState, priority: !priority })
  );
};

As an optimization, you can memoize handleToggle with useCallback() so that <Checkbox/> doesn't need to re-render every time your state updates:

const handleToggle = useCallback(event => {
  setTicket(({ priority, ...prevState }) =>
    ({ ...prevState, priority: !priority })
  );
}, [setTicket]);