How can I modify the first object in a React UseState array? - reactjs

Question

SANDBOX LINK
I am using a FormControl to try to update my state which defaults at const [numberOfChildren, updateNumberOfChildren] = useState([{age: undefined}]); I want to modify the first object in the array when a user clicks a button, and then enters a value in an input. I try to update the age with another useState Currently, the array's first object is {age: undefined} and is not updated by the useState hook
The code looks like this
<FormControl
placeholder="Age"
aria-label="Age"
aria-describedby="basic-addon2"
onChange={async (e) => {
await updateAge(e.target.value);
}}
/>
updated by the button
<Button
className="align-button"
onClick={async (e) => {
e.preventDefault();
if(numberOfChildren.length < 1) {
await updateNumberOfChildren((children) => [
...children
]);
} else {
await updateNumberOfChildren((children) => [
...children,
{ childAge: age },
]);
}
console.log(numberOfChildren)
}}
style={{ width: "100%" }}
variant="outline-primary"
type="submit"
size="lg"
>
Add Child
</Button>{" "}
Here is a sandbox, please have a look at the console for the output SANDBOX

Answer 1

The way you were doing it using const [age, updateAge] = useState(undefined); won't get you what you want because by doing that you'll only update the latest added child so you can't go back to the first one and modify or even modify any previous children after adding them as the current setup has no way to differentiate between which one you're trying to modify.
So, The idea here is that you need to identify each object in the array with something unique so I changed the object structure to the following:
const [numberOfChildren, updateNumberOfChildren] = useState([
{ id: 1, age: undefined }
]);
And here's how you update the state explaining every line:
// Update numberOfChildren state
function updateData(e) {
// Grab the id of the input element and the typed value
const { id, value } = e.target;
// Find the item in the array that has the same id
// Convert the grabed id from string to Number
const itemIndex = numberOfChildren.findIndex(
item => item.id === Number(id)
);
// If the itemIndex is -1 that means it doesn't exist in the array
if (itemIndex !== -1) {
// Make a copy of the state
const children = [...numberOfChildren];
// The child item
const child = children[itemIndex];
// Update the child's age
children.splice(itemIndex, 1, { ...child, age: value });
// Update the state
updateNumberOfChildren(children);
}
}
And when you add a new child the latest added child will have the id of the numberOfChildren state length plus 1 as I used 1 as a starting point:
onClick={e => {
e.preventDefault();
updateNumberOfChildren([
...numberOfChildren,
{ id: numberOfChildren.length + 1, age: undefined }
]);
}}
Finally, If you want to check any state value don't use console.log() after setState() because setState() is async so you won't get the changes immediately and since you're using hooks the only way around this is useEffect():
// Check the values of numberOfChildren whenever they get updated
useEffect(() => {
console.log("numberOfChildren", numberOfChildren);
}, [numberOfChildren]);
Here's the sandbox. Hopefully everything now is crystal clear.