Started learning React, and I'm trying to pass props to another component to render according to a list of values, but I get the noted error while trying so, even though I cannot find difference between my code and a working code. first component:
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;
second component:
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;
Honestly I tried everything. When I log what I'm sending with the first component to the second one, I get string as an outcome, yet when logging from the second component (or trying to use the data) it shows an object.
Please help me, I'll appreciate any help especially explanations so I can learn. Thanks a lot!
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;
The error you’re facing is because the object you’ve sent to child component is different than what you’re receiving in the child component
U need to destructure your props this way
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;And ListItem component is,
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;