How do I pass properties…

2 minute read

How do I pass properties as an object that is spread on the component? For example, I have <Item {...item} key={index} /> which is being mapped. I get an error that one of my required props url is not being passed, even though it is inside of the item object which is being spread.

Essentially this is what is being spread and url is the only required prop that I have on it right now item = { text: "Home", url: "/" };


Your code is correct, I suspect your item is not what you think it is

Also, key being index is useless

why is key useless? it’s supposed to be a unique number right?

Here is a broader view of my code

Header Component ``` const NavItems = [ { active: true, text: ‘Home’, url: ‘/’, }, { text: ‘Page 2’, url: ‘/page-2’, }, ];

<Navigation items={NavItems} /> *Navigation Component* export const Navigation = ({ direction = ‘vertical’, items, }: NavigationProps) => { return ( <nav> <ul className={direction}> {, index) => { return <Item {…item} key={index} />; })} </ul> </nav> ); }; *Item Component* export const Item = ({ active = false, altText, direction = ‘vertical’, onClick, icon, iconClasses, iconPlacement = ‘left’, itemClasses, text, textClasses, url = ‘’, }: NavigationItemProps) => { return ( <li className={${itemClasses} ${direction} ${active ? 'active' : ''}}> <Link to={url} title={text} onClick={(event) => onClick && onClick(event)} > {icon && ( <img alt={altText || text} className={${iconClasses} ${iconPlacement}} src={icon} /> )} {text && <span className={textClasses}>{text}</span>} </Link> </li> ); };```

If you use index as a key, it gives react no extra info to use when determining if this is the same competent as was in the last loop.

Use something unique about item, I’m this case, url would probably do

Can you post your prop types?

export interface NavigationItemProps { active?: boolean; altText?: string; direction?: 'horizontal' | 'vertical'; icon?: string; iconClasses?: string; iconPlacement?: 'left' | 'right'; itemClasses?: string; onClick?: (event: MouseEvent) =&gt; void; text?: string; textClasses?: string; url: string; }

As for the key, thanks that makes sense

Are you sure it’s Item that is throwing the proptype error? Not link?

Otherwise, this seems fine to me

Yeah, that’s why it’s throwing me too. I figure maybe TS doesn’t know how to look into the item?

Try doing it mantually

&lt;Item url="test" {...item} /&gt;

whats your props interface for Navigation Component?

Figured it out, I had to specify the object for item { NavigationItemProps, index: number) =&gt; {