Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

76
Vistas
Component's prop value isn't showing in React.js

I'm trying to make a clone of Spotify where I'm using Spotify-web-API to access all the user data (id, name, playlist info, etc.) And to avoid prop drilling all these data are getting stored in Datalayer with the help of React-Context-api. I have a component Sidebar.js where all the playlist names are getting pulled from the API and will be shown in the sidebar. Inside this component, I also have another component SidebarOption.js to show names of playlists. Although I'm getting the playlist names from the API but when I passed those in the SidebarOption.js component as title prop it isn't showing there. I also console logged the names to be sure. The names are showing in my console but not through the mapping function in SidebarOption component. I've attached a screenshot of what I'm getting in this link Screenshot of console log.

You'll see that outside the mapping function any prop value passed in the SidebarOption component is showing but not the ones inside the mapping function. So any help would be appreciated.

Sidebar.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>
  );
}
7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The main problem is, you're using a map. But, you're not returning the value.

You have:

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

Should be:

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

Here is the Codesandbox to notice: https://codesandbox.io/s/wizardly-sun-iku99?file=/src/App.js

7 months ago · Juan Pablo Isaza Denunciar

0

the problem here is that you are not returning the SidebarOption in the map function you instead can do it like that

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

or

  {playlists?.items?.map((playlist) => (
        <>
          <h2>hi</h2>;
          <SidebarOption title={playlist.name} />;
        </>
      ))}
7 months 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 empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.