0

Tengo una duda, ya se como puedo obtener los datos desde un componente padre a su hijo, pero no se como es de la manera inversa (de hijo a padre)

codigo padre:

import React from 'react'
import { DataFormCreate } from './includes/DataFormCreate'


export const FormCreate = () => {

    return (
        <div id="div-contests-create" className="bg-grey w-100">
            <form action="" method="GET" encType="" id="formCreateContests">
                <section className="bg-light py-3">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-9">
                                <h1 className="fw-bold mb-0"><span>Nombre</span></h1>
                                <p className="lead text-muted">Crear</p>
                            </div>
                            <div className="col-3">
                                <input className="btn btn-primary w-100 align-self-center" type="submit" value="Enviar concurso a revisión" />
                            </div>
                        </div>
                    </div>
                </section>
                <div id="div-overflow-auto">
                    <section className="bg-mix">
                        <div className="container">
                            <div className="row justify-content-evenly">
                                <DataFormCreate/>
                            </div>
                        </div>
                    </section>
                </div>
            </form>
        </div>
    )

}

componente hijo:

import React, { useState } from 'react'

export const DataFormCreate = () => {

    const [nameContest, setNameContest] = useState('') //este dato quiero obtener en el padre

    return (
        <div className="card rounded bg-dark text-white col-8 mb-2">
            <div className="card-body">
                <div className="row justify-content-center">
                    <div className="col-12 my-2">
                        <h5>Datos</h5>
                    </div>
                    <div className="col-5 my-3">
                        <label>Nombre</label>
                        <input 
                            type="text" 
                            name="txt-name" 
                            id="txt-name" 
                            className="form-control" 
                            onChange = { (e) => setNameContest(e.target.value) }
                            value= { nameContest }
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

1 respuesta 1

1

Lo tienes al revés, el estado debe de estar en el padre y para poder editar dicho estado lo que hacemos es que pasamos como un prop una función que haga referencia al setState en el elemento padre para que cambie su estado.

Resumiendo:

  1. Crea un estado en tu elemento padre.
  2. Crea una función en el elemento padre que te permita editar dicho estado.
  3. Pasa una referencia de esta función como un prop al hijo.
  4. Invoca el método en el hijo a través del prop recibido.

Entonces, pasa ese estado a tu elemento padre, hereda el nombre que necesitas y el método para editarlo:

export const FormCreate = () => {
 
    const [nameContest, setNameContest] = useState('')

    const handleNameChange = (newName)=>{
       setNameContest(newName);
    };

    return (
        <div id="div-contests-create" className="bg-grey w-100">
            <form action="" method="GET" encType="" id="formCreateContests">
                <section className="bg-light py-3">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-9">
                                <h1 className="fw-bold mb-0"><span>Nombre</span></h1>
                                <p className="lead text-muted">Crear</p>
                            </div>
                            <div className="col-3">
                                <input className="btn btn-primary w-100 align-self-center" type="submit" value="Enviar concurso a revisión" />
                            </div>
                        </div>
                    </div>
                </section>
                <div id="div-overflow-auto">
                    <section className="bg-mix">
                        <div className="container">
                            <div className="row justify-content-evenly">
                                <DataFormCreate name={nameContest} nameChange={handleNameChange }/>
                            </div>
                        </div>
                    </section>
                </div>
            </form>
        </div>
    )

}

Luego en tu elemento hijo utiliza estos valores recibidos por medio de los props:

export const DataFormCreate = ({name,nameChange}) => {

return (
    <div className="card rounded bg-dark text-white col-8 mb-2">
        <div className="card-body">
            <div className="row justify-content-center">
                <div className="col-12 my-2">
                    <h5>Datos</h5>
                </div>
                <div className="col-5 my-3">
                    <label>Nombre</label>
                    <input 
                        type="text" 
                        name="txt-name" 
                        id="txt-name" 
                        className="form-control" 
                        onChange = { (e)=>{nameChange(e.target.value)} }
                        value= { name }
                    />
                </div>
            </div>
        </div>
    </div>
)}

¡Espero que esto te sea de ayuda!

4
  • Estimado me aparece el siguiente error: TypeError: nameChange is not a function. Commented el 9 abr. 2021 a las 1:46
  • ¿Pasaste el método como prop en el padre y lo recibiste en el hijo? Usé destructuring en los argumentos del hijo para pasar los props. Si no hiciste eso el input del hijo debería de decir undefined.
    – FranAcuna
    Commented el 9 abr. 2021 a las 2:02
  • Le estaba asignado los cambios a otros componentes... gracias!!! me sirvió mucho y logro entender como se transmite la data. Commented el 9 abr. 2021 a las 2:35
  • Con gusto! Se vuelve complicado pasar props hacia "arriba" si tienes una estructura compleja, en caso de ser así, se recurren a cosas como Redux o ReactContext. Te los menciono por si quieres leer acerca de ello en caso de que lo necesites.
    – FranAcuna
    Commented el 9 abr. 2021 a las 4:01

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.