1

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.

1
  • Lo que pides es bastante extenso de explicar aqui. Pero si lo que quieres es aprender formularios de forma nativa en react te recomiendo este canal youtu.be/ECWR2ohHWKc ahi tienes lo basico pero tiene mas videos explicando cosas avanzadas Commented el 21 mar. 2022 a las 9:39

1 respuesta 1

2

Cada componente en React cuando tiene componentes hijos tiene acceso a una prop llamada children la cual todo lo que se pase dentro de ese componente se tomara como children, ejemplo:

    <Padre>
      <Hijo /> //ambos conforman children
      <Hijo/>  //ambos conforman children 
    </Padre>

   <Padre>
    {children}
   </Padre>

Por lo tanto tu código del componente padre quedaria asi:

const FormGET = function (props) { //podrias usar destructuring { children }
  return <form method="get">
     { props.children }
  </form>;
};

export default FormGET;

aqui children mostrara los hijos que en este caso son Los FormGroup (los cuales tienen sus propios hijos)

ahora FormGroup

const FormGroup = function (props) { //podrias usar destructuring { children
  return (
     <div className="form-group">
        { props.children } 
     </div>
  );
};

export default FormGroup;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.