Tengo un componente de navegación secundario y estoy tratando de obtener la clave del elemento seleccionado en el componente principal para actualizar mi estado al elemento de navegación seleccionado. Estoy usando un mapa en el componente secundario y parece que no puedo pasar la clave del elemento seleccionado nuevamente al elemento principal para establecer el estado. aquí están mis componentes
Padre
** 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} /> )Componente secundario (navegación) con función de mapa
<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 >Al onClick={props.onClick(navItem.key)} , está asignando el valor de retorno de props.onClick al evento de clic de botones llamándolo inmediatamente al renderizar. Debe estar envuelto en una función.
<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> De esta manera, cuando se activa el evento onClick , se llamará a la función anónima que llamará a props.onClick(navItem.key) .