Estoy intentando crear mis primeros componentes aplicando la lógica de React(Crear bloques de lego para luego reutilizarlos) para un formulario, pero no entiendo como envolver el componente FormGET y FormGrup a mis otros elementos. Estos componentes abren y cierran pero no entiendo como envolver estos componentes como Padres hacia los hijos Ejemplo:
Mi vista
const RegisterView = function () {
return (
<>
<div className="container">
<div className="title">
<h1>Registro</h1>
</div>
<FormGET>
<FormGroup>
<Label labelFor="Input_name" title="Nombre completo:" />
<Input id="input_name" name="Name" type="text" value={EmployeeName} />
</FormGroup>
<FormGroup>
<Label labelFor="input_email" title="Direccion de correo:" />
<Input id="input_email" name="Email" type="email" value={EmployeeNameEmail} />
</FormGroup>
<FormGroup>
<Label labelFor="input_age" title="Edad:" />
<Input id="input_age" name="Age" type="number" value={EmployeeNameEmail} />
</FormGroup>
</FormGET>
</div>
</>
);
};
export default RegisterView;
FormGET
const FormGET = function () {
return <form method="get">
</form>;
};
export default FormGET;
FormGroup
const FormGroup = function () {
return <div className="form-group">
</div>;
};
export default FormGroup;
Label
const Label = function ({ labelFor,title}) {
return <label htmlFor={labelFor}>{title}</label>;
};
export default Label;
Input
const Input = function ({ id, name,type, value }) {
return <input id={id} name={name} type={type} value={value}/>;
};
export default Input;
Me estoy guiando de los componente de: https://react-bootstrap.github.io/forms/overview/
No quiero usar esa libreria, lo que busco o quiero es entender como trabaja React.