react checkbox onChange to call function is check state is true in typescript-CodePudding

I am exploring the react onChange feature. The functionality I would like to do is when checkbox is selected, I would like to update local data to add some value when checkbox is unselected, I would like to just populate the original data the code I have seems do the reverse of what I want. any can provide some guideline?

codesandbox

import "./styles.css";
import { useState } from "react";

export default function App() {
  const localData = [{ name: "apple", phone: 12345 }];
  const [check, setCheck] = useState(false);
  const [data, setData] = useState(localData);
  const handleOnChange = () => {
    setCheck(!check);
    check ? setData([...data, { name: "amazon", phone: 222 }]) : setData(data);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>
        <input type="checkbox" check onChange={handleOnChange}></input>
      </p>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}

CodePudding user response：

The setCheck runs asyncranously. So in the function handleOnChange, right after setCheck(!check), check's value has not been set to the new value yet.

You could use an effect here since you want the side-effect of changing data from changing check. This way, whenever check is done changing, the effect triggers:

const handleOnChange = () => {
    setCheck(!check);
};
useEffect(() => {
  check &&
      setData((previous) => [...previous, { name: "amazon", phone: 222 }]);
}, [check]);

Updated sandbox: https://codesandbox.io/s/quirky-rain-hmhkk

CodePudding user response：

There is no need of using two states, that solution will give you more problems when you want to add more options.

I would go for an approach similar to this one:

import "./styles.css";
import { useState } from "react";

const localData = [{ name: "apple", phone: 12345 }];
const extraData = [{ name: "amazon", phone: 222 }];

export default function App() {
  const [data, setData] = useState(localData);

  const handleOnChange = (item) => {
    if (!data.find(({ name }) => name === item.name)) setData([...data, item]);
    else setData(data.filter(({ name }) => name !== item.name));
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>
        {extraData.map((item) => {
          return (
            <input
              key={item.name}
              type="checkbox"
              checked={data.includes(({ name }) => name === item.name)}
              onChange={() => handleOnChange(item)}
            />
          );
        })}
      </p>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}

This will allow you to add more checkboxes in the future.

CodePudding user response：

So, you want the data to be added to data when the checkbox IS checked? Just invert the condition of the ternary that you use in handleOnChange:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const localData = [{ name: "apple", phone: 12345 }];
  const [check, setCheck] = useState(false);
  const [data, setData] = useState(localData);
  const handleOnChange = () => {
    setCheck(!check);
    !check ? setData([...data, { name: "amazon", phone: 222 }]) : setData(data);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>
        <input type="checkbox" check onChange={handleOnChange}></input>
      </p>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}