Comencé a aprender React, y estoy tratando de pasar accesorios a otro componente para representar de acuerdo con una lista de valores, pero obtengo el error anotado al intentarlo, aunque no puedo encontrar la diferencia entre mi código y un código de trabajo. primer componente:
const navbarCollection = [ { id: 1, item: 'Home', ref: '#'}, { id: 2, item: 'Search', ref: '#'}, { id: 3, item: 'Login', ref: '#'}, { id: 4, item: 'Register', ref: '#'}, ]; function UnorderedListNavBar() { return ( <div id='wrapper-navBarList'> <ul className='navbar-nav mr-auto'> { navbarCollection.map((menuItem) => { return (<ListItem key={menuItem.id} mykey={menuItem.item} value={menuItem.ref} />); }) } </ul> </div> ) } export default UnorderedListNavBar;segundo componente:
function ListItem(id, type, href) { return ( <div id='wrapper-navBarListItem'> <li className='list-item active'> <a className='nav-link' href={href}>test</a> </li> </div> ) } export default ListItem;Honestamente probé todo. Cuando registro lo que estoy enviando con el primer componente al segundo, obtengo una cadena como resultado, pero cuando registro desde el segundo componente (o intento usar los datos) muestra un objeto.
Por favor ayúdenme, agradeceré cualquier ayuda, especialmente explicaciones para poder aprender. ¡Muchas gracias!
function ListItem({mykey, value}) { return ( <div id='wrapper-navBarListItem'> <li className='list-item active'> <a className='nav-link' href={value}>test</a> </li> </div> ) } export default ListItem;El error al que se enfrenta se debe a que el objeto que ha enviado al componente secundario es diferente al que está recibiendo en el componente secundario.
Necesitas desestructurar tus accesorios de esta manera.
function ListItem({ id, mykey, href }) { return ( <div id="wrapper-navBarListItem"> <li className="list-item active"> <a className="nav-link" href={href}> test {mykey} </a> </li> </div> ); } //A more compact way to pass your props const navbarCollection = [ { id: 1, item: 'Home', ref: '#'}, { id: 2, item: 'Search', ref: '#'}, { id: 3, item: 'Login', ref: '#'}, { id: 4, item: 'Register', ref: '#'}, ]; function UnorderedListNavBar() { return ( <div id='wrapper-navBarList'> <ul className='navbar-nav mr-auto'> { navbarCollection.map((menuItem) => { const {id, item, ref} = menuItem; return <ListItem key={id} {...{id, item, href: ref}} /> }) } </ul> </div> ) } export default UnorderedListNavBar;Y el componente ListItem es,
function ListItem(props) { const {id, type, href} = props return ( <div id='wrapper-navBarListItem'> <li className='list-item active'> <a className='nav-link' href={href}>test</a> </li> </div> ) } export default ListItem;