I'm facing a challenge with a parent component that needs to manage the data of its child components stored in an array of objects. My goal is to add new child components and maintain their information within the parent's state as an array of objects. I need guidance on how to achieve this, especially when it comes to both tracking the objects in the state and retrieving content from the children.
The structure includes:
const Parent: React.FC = () => {
const [children, setChildren] = React.useState(
[
{
id:1,
name:'',
age:0,
}
]
);
const getChildName = () => {
// uncertain about accessing the new child
}
// Adding a new child
const AddChild = () => {
let tmpid = children[children.length].id + 1; // unsure if this approach is correct
setChildren(
[
...children,
{
id:tmpid,
name:' ',
age:0,
}
]
)
}
return (
<button onClick={this.addChild}>Add component</button>
{
children.map((child) => (
<NewChild key={child.id} getChildName={getChildName} getChildAge={getChildAge}/>
))
}
)
}
Additionally, there is a basic child component involved:
interface IChild {
name?: string;
age?: number;
}
type Props = {
getChildName : void,
getChildAge : void,
}
const NewChild: React.FC<Props> = (Props) => {
const [child, setChild] = React.useState<Partial<IChild>>({});
return (
<input value={child?.name??''} onChange={e => setChild({...child , child: e.target.value})}/>
<input value={child?.age??''} onChange={e => setChild({...child , child: parseFloat(e.target.value)})}/>
)
}