How to update a single property of the state in a react hook?

Question

I'm trying to change a state hook and I got this error... I know another way to change but it should work with the spread syntax, right?

export default function App() {
  const [state, setState] = {
    sld_url: "",
    geojson_url: "",
  }

  const handleSldUrlChange = event => {
    setState({...state, sld_url: event.target.value})
  }

  return (
    <TextField
     label="SLD URL"
     value={state.sld_url}
     className={classes.textField}
     onChange={handleSldUrlChange}
     margin="normal"
     variant="outlined"
    />
  );
}

Answer 1

First thing is you need to useState :

const [state, setState] = useState({
    sld_url: "",
    geojson_url: "",
  })

Than inside handleSldUrlChange function you can use a custom callback for updating state

const handleSldUrlChange = event => {
    setState(prev => {...prev, sld_url: event.target.value})
   //or
   //setState({...state,sld_url: event.target.value})
  }

Demo: https://stackblitz.com/edit/react-mv8lsz