1

Con React JS, tengo un formulario con dos componentes hijos: uno para un input de caracteres y el otros para unos botones que un futuro los usaré cómo checkbox. Mi pregunta va dirigida al primer componente, el del input. Necesito enviar el valor de un input del componente hijo llamado NumCarac.js, al componente padre llamado Formulario.js

El código del componente hijo es:

import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const NumCarac = () => {

  const [caracteres, setCaracteres] = useState(12);

  return (
    <Form.Group className="mb-3" controlId="#">
      <Form.Label>Número de caracteres</Form.Label>
      <Button
        onClick={() => {
          if (caracteres > 1) {
            setCaracteres(caracteres - 1);
          }
        }}
      >
        -
      </Button>
      <Form.Control type="text" value={caracteres} readOnly />
      <Button onClick={() => setCaracteres(caracteres + 1)}>+</Button>
    </Form.Group>
  );
};

export default NumCarac;

Y el del padre:

import React from "react";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import NumCarac from "./NumCarac";
import Check from "./Check";

const Formulario = () => {

  return (
    <Form>
      <NumCarac></NumCarac>
      <Check></Check>
      <Button variant="primary" type="submit">
        Generar Contraseña
      </Button>
      <Form.Control type="text" value="V;ZQf}seH3Ij" readOnly />
    </Form>
  );
};

export default Formulario;

1 respuesta 1

2
const NumCarac = ({ caracteres, setCaracteres }) => {
  //const [caracteres, setCaracteres] = useState(12);
};

const Formulario = () => {
  const [caracteres, setCaracteres] = useState(12);
  return (
    <Form>
      <NumCarac
        caracteres={caracteres}
        setCaracteres={setCaracteres}
      >
      </NumCarac>
    </Form>
  );
}

Si necesitas manejar un estado, lo mejor es mandar el estado al componente padre, ya que varios hijos comparten la misma informacion. Si tuvieras una cantidad de hijos muy grande, necesitas un context. Pero con props esta bien para este caso.

Por cierto, NumCarac no es precisamente un nombre que exprese exactamente lo que hace el componente, prueba con algo mas descriptivo, para que en un futuro, sepas que significa y que hace cada componente.

1

Tu Respuesta

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

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