¿Cómo transferir accesorios de un hermano a otro, por favor?
En la aplicación principal solo tengo 2 hermanos:
Aporte:
import React from "react"; const Input = () => { return ( <> <label htmlFor="name">Full Name</label> <input type="text" id="name" placeholder="TheDareback" /> <label htmlFor="job">Job Title</label> <input type="text" id="job" placeholder="Frontend Developer" /> </> ); }; export default inputDetails;Avance:
import React from "react"; const Preview = () => { return ( <> <table> <thead> <tr> <th>{/* here I need a Full Name from the input */}</th> <th>{/* here I need a Job Title from the input*/}</th> </tr> </thead> </table> </> ); }; export default Preview;Traté de agregar useEffect a Preview para leer el valor de cada entrada.
por ejemplo
const name = document.querySelector("#name"); const [inputName, setInputName] = useState("TheDareback"); useEffect(() => (name.value ? setInputName(name.value) : null));Pero sigo recibiendo un error:
Preview.js:9 Uncaught TypeError: Cannot read properties of null (reading 'value')
¿Es posible ejecutar useEffect solo durante la segunda representación? Alternativamente, ¿hay otra opción que mover los accesorios directamente desde Input.js, donde crearía un controlador para cada onChange en la entrada?
Muchas gracias por ir en la dirección correcta.
Necesita algún tipo de componente de contenedor (o App.js, por ejemplo), puede tener un estado de entrada allí y una función inputHandler para pasar al componente de entrada y colocarlo con onChange, por ejemplo.
import React, {useState} from 'react'; export default function Container() { const [input, setInput] = useState({ name: '', job: '' }) const inputHandler = (e, type) => { setInput(prevState => ({...prevState, [type]: e.target.value})) } return ( <> <Input onInputChange={inputHandler} /> <Preview input={input} /> </> ); }Aporte:
const Input = ({onInputChange}) => { return ( <> <label htmlFor="name">Full Name</label> <input type="text" id="name" placeholder="TheDareback" onChange={(e) => onInputChange(e, 'name')} /> <label htmlFor="job">Job Title</label> <input type="text" id="job" placeholder="Frontend Developer" onChange={(e) => onInputChange(e, 'job')} /> </> ); }; export default Input;Avance:
const Preview = ({input}) => { return ( <> <table> <thead> <tr> <th>{input.name}</th> <th>{input.job}</th> </tr> </thead> </table> </> ); }; export default Preview;Mantenga el estado en el componente de la App y asigne setter a Input y state al componente de Preview .
import Input from "./Input"; import Preview from "./Preview"; export default function App() { const [state, setState] = useState({ name: "", job: "" }); return ( <div className="App"> <Input setState={setState} /> <Preview state={state} /> </div> ); } import React from "react"; const Input = ({ setState }) => { const onChangeHandler = (e) => { setState((prevState) => ({ ...prevState, [e.target.id]: e.target.value })); }; return ( <> <label htmlFor="name">Full Name</label> <input type="text" id="name" placeholder="TheDareback" onChange={onChangeHandler} /> <label htmlFor="job">Job Title</label> <input type="text" id="job" placeholder="Frontend Developer" onChange={onChangeHandler} /> </> ); }; export default Input; import React from "react"; const Preview = ({ state: { name, job } }) => { return ( <> <table> <thead> <tr> <th>{name}</th> <th>{job}</th> </tr> </thead> </table> </> ); }; export default Preview;