import Child from "./Child"; export default function Parent() { function child(name, setName) { return ( <> <input placeholder="Please Input" value={name} onChange={(e) => setName(e.target.value)} /> </> ); } return ( <> <Child child={child()} /> </> ); } import { useState } from "react"; export default function Child({ child }) { const [name, setName] = useState(""); const [list, setList] = useState([]); function onSubmit(e) { e.preventDefault(); if (name === "") { console.log("Please enter a name"); } else { setList([...list, name]); setName(""); console.log("Name added to List"); } } return ( <> <form onSubmit={onSubmit}> {child(name, setName)} <button type="submit">Submit</button> </form> </> ); }Hola, he estado tratando de obtener los datos del niño y luego pasarlos a través de la función principal.
Entonces, en el elemento secundario, quiero que pase a través de la función secundaria para que el elemento principal pueda obtener el nombre, setName y luego enviarlo de vuelta al elemento secundario para que pueda agregarse a la lista. Si tiene más preguntas, déjelas en la sección de comentarios a continuación y haré todo lo posible para responderlas. Gracias
Enlace de Codesandbox: https://codesandbox.io/embed/heuristic-lamarr-u6fzbd?fontsize=14&hidenavigation=1&theme=dark
No invoque el método (hijo, en su caso) mientras lo envía como accesorio
import Child from "./Child"; export default function Parent() { function child(name, setName) { return ( <> <input placeholder="Please Input" value={name} onChange={(e) => setName(e.target.value)} /> </> ); } return ( <> <Child child={child} /> {/* pass the child method it like this */} </> ); }