React - passing props are viewed as object, error prompt 'objects are not valid as a react chil-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

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>
  );
}

CodePudding user response：

//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;

CodePudding user response：

You can either have

function ListItem(props) {
  return (
        <div id='wrapper-navBarListItem'>
            <li className='list-item active'>
                <a className='nav-link' href={props.href}>{props.item}</a>
            </li>
        </div>
    )
}

function ListItem({href, item}) {
  return (
        <div id='wrapper-navBarListItem'>
            <li className='list-item active'>
                <a className='nav-link' href={href}>{item}</a>
            </li>
        </div>
    )
}

We have a props received by this component. We can call the attribute of the received component by props.href, props.item etc. But it is troublesome to have "props." every time, so we use {} to destruct the props, then we can just use href, item to call the attributes.

For any of the above component, call it like this: <ListItem key={menuItem.id} item={menuItem.item} href={menuItem.ref} />