• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

178
Vistas
El valor de propiedad del componente no se muestra en React.js

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> ); }
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

El principal problema es que estás usando un mapa. Pero, no estás devolviendo el valor.

Tú tienes:

 {playlists?.items?.map((playlist) => { console.log(playlist.name); <h2>hi</h2>; <SidebarOption title={playlist.name} />; })}

Debiera ser:

 {playlists?.items?.map((playlist) => { console.log(playlist.name); <h2>hi</h2>; return <SidebarOption title={playlist.name} />; })}

Aquí está Codesandbox para notar: https://codesandbox.io/s/wizardly-sun-iku99?file=/src/App.js

almost 3 years ago · Juan Pablo Isaza Denunciar

0

el problema aquí es que no está devolviendo SidebarOption en la función de mapa, sino que puede hacerlo así

 {playlists?.items?.map((playlist) => { console.log(playlist.name); return ( <> <h2>hi</h2>; <SidebarOption title={playlist.name} />; </> ); })}

o

 {playlists?.items?.map((playlist) => ( <> <h2>hi</h2>; <SidebarOption title={playlist.name} />; </> ))}
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda