Unable to Edit Multi Input fields with React useState - reactjs

Question

I am new to react, i have an data object displaying it as form input default values.I need to update the object with input entry values. However i am able to edit only the first input field, but not other input fields. Could anyone help me what i am missing here.
Thank You
import { useState } from "react";
let userData = {
name: "Sample",
location: {
city: "Hyd",
population: "10000"
}
};
export default function App() {
const [data, setData] = useState(userData);
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setData(previousState => {
return { ...previousState, [name]: value }
})
};
const handleSubmit = (e)=>{
e.preventDefault();
console.log(data);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<form>
<div>
<label>
Enter Your Name:
<input
type="text"
name="name"
value={data.name || ""}
onChange={handleChange}
/>
</label>
</div>
<div>
<label>
Enter Your City:
<input
type="text"
name="city"
value={data.location.city || ""}
onChange={handleChange}
/>
</label>
</div>
<div>
<label>
Enter Population:
<input
type="text"
name="population"
value={data.location.population || ""}
onChange={handleChange}
/>
</label>
</div>
<div>
<input type="submit" value="Submit" onClick={handleSubmit}/>
</div>
</form>
</div>
);
}

Answer 1

the problem is that you’re saving the city and population inside location object and when you set the state your function doesn’t recognize the location object.
one solution is that you have a flat state object like this
let userData = {
name: "Sample",
city: "Hyd",
population: "10000"
};
another solution is to check if the name is city or population pass the new value inside location object