Get Child components constants/state in parent component in React - reactjs

Question

I have a component which is a MUI TAB like this
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
value={value}
onChange={handleChange}
aria-label="basic tabs example"
>
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
<Child1 />
</TabPanel>
<TabPanel value={value} index={1}>
<Child2 />
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
<Box>
<Button onClick={submittab}>Submit</Button>
</Box>
</Box>
As mentioned, there are 2 child components with some textfields in it.
What I am trying to achieve is to read the child data in parent and submit it to an API as a single object.
Please help
Below the Sandbox
https://codesandbox.io/s/naughty-shadow-u2icz1?file=/demo.tsx:1233-1962
Please note I am working in typescript
Here is my child component1
import { FormLabel, TextField } from "#mui/material";
import react, { useState } from "react";
function Child1() {
const clientObj = {
user: {
name: "",
age: ""
}
};
const [client, setClient] = useState(clientObj);
const handlechange = (event: { target: { name: any; value: any } }) => {
const { name, value } = event.target;
setClient((prevState) => ({
...prevState,
context: {
...prevState.user,
[name]: value
}
}));
};
return (
<>
<FormLabel>Name</FormLabel>
<TextField
name="name"
id="text-id"
value={client.user.name}
onChange={handlechange}
/>
<FormLabel>Age</FormLabel>
<TextField
name="name"
id="text-id"
value={client.user.name}
onChange={handlechange}
/>
</>
);
}
export default Child1;

Answer 1

You could use a state in your parent component that will be passed as props to your children, so that they can use the parent's update state function.
Parent code:
const [state, setState] = useState()
<Child parentState={{state, setState}} />
Children code:
export function Child({parentState}) {
const {parentStateValue, setParentState} = parentState
const childTitle = 'Acme'
return <button onClick={setParentState(e => {...e, childTitle })} >childTitle</button>
}
the ideal would be to provide keys to your children so that you can manage each of their data independently in the state.