Change nested object with one function in react

Question

I have this kind of object where I want to change the Ethereum value for example;

const [reportData, setReportData] = useState({
  nameOrganization: "test5",
  socialMedia: "test",
  country: "aa",
  discord: "test",
  date: "date",
  time: "time",
  NFT: {
    ethereum: true,
    tezos: false,
    solana: false,
    other: "test",
  },
});

const changeData = (event: { target: { id: any, value: any } }) => {
  const { id, value } = event.target;
  setReportData({ ...reportData, [id]: value });
};

Can somebody help me to change the function in that way so I can change the Ethereum to.

This function works for country, date, or time.

Thanks a lot

Answer 1

Try spread NFT as well. (on side note, Actually React does not recommend have complex object as state variable, prefer reducer)

const changeData = (event: { target: { id: any, value: any } }) => {
  const { id, value } = event.target;
  setReportData({ ...reportData, NFT: { ...reportData.NFT, [id]: value } });
};