¿Cuál es el problema con la desestructuración de objetos en REACT aquí? Verifique el CODEPEN AQUÍ La misma desestructuración funciona fuera de React. ¿Cómo puedo enviar un objeto como argumento y tener una desestructuración parametrizada en el componente secundario?
const MyComponent= ({name,age})=> { return ( <div> <h1> HI THERE IM {name}</h1> </div> ); } function App() { let person = { name: "ALEN", age : 40}; return ( <div> <MyComponent person={person} /> </div> ); } ReactDOM.render(<App />, document.querySelector("#root"));React pasará un objeto a MyComponent que se ve así:
{ person: { name: "ALEN", age: 40 } } Debido a que especifica el name de las propiedades y la age en la desestructuración de su objeto y no en la person , no estará definido.
Puedes declarar la función así:
const MyComponent = ({ person: { name,age } }) => { return ( <div> <h1> HI THERE IM {name}</h1> </div> ); }Está obteniendo person en accesorios, no name y age , puede seguir así.
Primero destruya a la person de props y luego destruya el name y age de person .
const MyComponent = ({ person }) => { const { name, age } = person; return ( <div> <h1> HI THERE IM {name}</h1> </div> ); };