Soy nuevo en Reactjs y gracias de antemano. Tengo los siguientes estados:
const [firstName, setFirstName]=useState(); const [lastName, setLastName]=useState(); Quiero pasar tanto el firstName como el lastName al componente secundario desde el componente principal al mismo tiempo. ¿Cómo podría hacer eso?
Podría hacerlo de esta manera, suponiendo que sus componentes se llamen Parent e Child :
export default function Parent(){ const [firstName, setFirstName]=useState(); const [lastName, setLastName]=useState(); return ( <Child firstName={firstName} lastName={lastName} /> ) } Y los metes dentro de Child así:
export default function Child(props){ console.log(props.firstName, props.lastName) return <div></div> }Si quiere decir que desea pasar el nombre y el apellido al elemento secundario, relevante para el componente donde declaró los estados, solo necesita pasarlos como accesorios
<Child firstName={firstName} lastName={lastName} />y dentro del niño accederías a ellos como accesorios
function Child(props){ console.log(props) //this will show props of child component, there are stored your statements return(...something here...) }Vea los documentos de reacción para componentes y accesorios
Los componentes aceptan entradas arbitrarias (llamadas "accesorios") y devuelven elementos React que describen lo que debería aparecer en la pantalla.
Cuando React ve un elemento que representa un componente definido por el usuario, pasa atributos JSX (y elementos secundarios) a este componente como un solo objeto. Llamamos a este objeto "accesorios".
import { useState } from "react"; function ParentComponent() { const [firstName, setFirstName] = useState("John"); const [lastName, setLastName] = useState("Smith"); return ( <div className="ParentComponent"> <ChildComponent firstName={firstName} lastName={lastName} /> </div> ); } function ChildComponent(props) { return ( <div className="ChildComponent"> <p>firstName: {props.firstName}</p> <p>lastName: {props.lastName}</p> </div> ); }