Estoy tratando de hacer un clon de Spotify donde estoy usando Spotify-web-API para acceder a todos los datos del usuario (identificación, nombre, información de la lista de reproducción, etc.) Y para evitar la perforación de accesorios, todos estos datos se almacenan en Datalayer con la ayuda de React-Context-api . Tengo un componente Sidebar.js donde todos los nombres de las listas de reproducción se extraen de la API y se mostrarán en la barra lateral. Dentro de este componente, también tengo otro componente SidebarOption.js para mostrar los nombres de las listas de reproducción. Aunque obtengo los nombres de las listas de reproducción de la API, pero cuando los pasé en el componente SidebarOption.js como accesorio de title , no se muestra allí. También registré los nombres en la consola para estar seguro. Los nombres se muestran en mi consola pero no a través de la función de mapeo en el componente SidebarOption. Adjunto una captura de pantalla de lo que obtengo en este enlace Captura de pantalla del registro de la consola .

Verá que fuera de la función de mapeo se muestra cualquier valor prop pasado en el componente SidebarOption , pero no los que están dentro de la función de mapeo. Por lo que cualquier ayuda se agradece.

Barra lateral.js

 function SideBar() { const [{ playlists }, dispatch] = UseDataLayerValue(); console.log("user playlist from sidebar.js", playlists); return ( <div className="sidebar"> <img className="sidebar__logo" src="https://getheavy.com/wp-content/uploads/2019/12/spotify2019-830x350.jpg" alt="spotify-logo" /> <SidebarOption Icon={HomeIcon} title="Home" /> <SidebarOption Icon={SearchIcon} title="Search" /> <SidebarOption Icon={LibraryMusicIcon} title="Your Library" /> <br /> <strong className="sidebar__title">PLAYLISTS</strong> <hr /> {playlists?.items?.map((playlist) => { console.log(playlist.name); <h2>hi</h2>; <SidebarOption title={playlist.name} />; })} </div> ); }

SidebarOption.js

 function SidebarOption({ title, Icon }) { return ( <div className="sidebarOption"> {Icon && <Icon className="sidebarOption__icon" />} {Icon ? <h4>{title}</h4> : <p>{title}</p>} </div> ); }