Get key of mapped child component from parent function-CodePudding

I have a child navigation component and i'm trying to get the key of the selected item in the parent component to update my state to the selected nav item. I'm using a map in the child component and I cant seem to pass the key of the selected item back up to the parent item to set the state. here are my components

Parent

** my function to set the nav item **
    let navPress = async key => {
        let selNavItem = await navItems.find(object => {
            return object.key === key
        });

        setActiveNavItem(selNavItem.key)
    }

** return for parent component **
return(
   <ProjectDetailNav
                navItems={navItems}
                activeNavItem={activeNavItem}
                onClick={() => navPress}
            />
)

Child component (nav) with map function

<div id='nav-container'>
            {props.navItems.map(navItem => {
                if (navItem.key === props.activeNavItem) {
                    // console.log(navItem.key)
                    return (
                        <button className='active-nav-item' key={navItem.key} onClick={props.onClick(navItem.key)}>
                            <img className='nav-item-icon' src={navItem.icon} />
                            <h6 className='nav-item-title'>{navItem.title}</h6>
                        </button>
                    )
                } else {
                    return (
                        <button className='nav-item' key={navItem.key} onClick={props.onClick(navItem.key)}>
                            <img className='nav-item-icon' src={navItem.icon} />
                            <h6 className='nav-item-title'>{navItem.title}</h6>
                        </button>
                    )
                }
            })}

        </div >

CodePudding user response：

By onClick={props.onClick(navItem.key)} you are assigning the return value of props.onClick to buttons click event calling it immediately on render. It should be wrapped in a function.

<button
    className="active-nav-item"
    key={navItem.key}
    onClick={() => props.onClick(navItem.key)}
>
    <img className="nav-item-icon" src={navItem.icon} />
    <h6 className="nav-item-title">{navItem.title}</h6>
</button>

This way when onClick event is fired, the anonymous function will be called which will call props.onClick(navItem.key).