Learn Advanced React - Mixtape Context Project

I was looking at my code for the Mixtape Context project in the “Advanced React” course. I tried to make a MixtapeContext in the MixtapeContext.js file. They also said to make a wrapper component of MixtapeContext.Provider. So here is the code:

import React, {useState} from 'react'; export const MixtapeContext = React.createContext(); export default function MixtapeProvider({children, songs}) { const [genre, setGenre] = useState("all"); const [sortOrder, setSortOrder] = useState("ascending"); return ( <MixtapeContext.Provider value={{songs, genre, setGenre, sortOrder, setSortOrder}}> {children} </MixtapeContext.Provider> ); }

Then I tried to import this component into the MixtapeApp.js file.

import React from "react"; import {MixtapeProvider} from "./MixtapeContext.js"; import {SongList} from "./SongList.js"; import {Controls} from "./Controls.js"; export const MixtapeApp = () => { return ( <MixtapeProvider songs={songs}> <h1 className="heading">My 🔥 Mixtape</h1> TODO: make some music...? 🎶 <Controls /> <SongList /> </MixtapeProvider> ); }; const songs = [ { artist: "Smash Mouth", genre: "pop", name: "All Star", year: 1999 }, { artist: "Drake", genre: "rap", name: "Hotline Bling", year: 2015 }, { artist: "Lizzo", genre: "hip hop", name: "Juice", year: 2019 }, { artist: "Rick Astley", genre: "rock", name: "Never Gonna Give You Up", year: 1987 }, { artist: "4 Non Blondes", genre: "rock", name: "What's Up", year: 1993 } ];

I also imported the SongList component and tried to map the Song component in SongList.js below:

import React, {useContext} from "react"; import { Song } from "./Song"; import {MixtapeContext} from "./MixtapeContext"; export const SongList = () => { // Your code here! ✨ const {genre, sortOrder, songs} = useContext(MixtapeContext); return ( <> { songs.map(function(song){ return ( <Song {...song} key={song.name}/> ); }); } </> ); };

I am unsure why it is not mapping the songs onto the browser. Can someone zero-in on the problem? I think it may be either of these problems.

  1. My import statements are incorrect
  2. I need to wrap the SongList component with a “div” element
  3. I did not pass down the Context correctly or imported the useContext
  4. I made an error in the MixtapeProvider component

Any suggestions will be appreciated.

1 Like

I, myself, do not see an issue with the code however I ended up searching for answers too on this similar problem. Usually in these projects, I can console.log specific results to see if I’m getting variables correctly. However, I noticed that the compilation seemed stuck on certain saves even after making edits. Console.log results I knew I deleted still would pop up. It could be a similar issue to yours in that the new saves you are doing are not being compiled.

This exercise seems to be broken :man_shrugging:t2: The console isn’t available, and the page won’t reload. I’m kinda working blind here. Also it would awesome to have access to a repo somewhere so that we could refer to the finished project

Hi,

Maybe, I got the same issues like you. So I decided to code it in my computer.

Following my code: Mixtape - Context

Any comment would be very appreciated,

1 Like

I had trouble with this during the beta testing. The online IDE makes it almost impossible to debug, and when an error is thrown, the app just stops updating. I did solve it in the end, though. Here’s my solution on GitHub if you are interested.

1 Like

Hi everyone,

I was able to get the project to work as well off-platform. I don’t know the error on the exercise, but here is my GitHub code:

Let me know if it helps.

2 Likes

By watching your codes I manage to get mine to work on the platform

Below are my codes / Solution:

Probably I am answering too late, but I have a similar issue. I guess this part of the platform is broken. Maybe it was better for the platform to force the user/ student to practice in on our own IDEs. Cause in there it works just fine.

I think I found the issue. It is in the MixtapeApp.js. In there, it doesn’t matter what changes you implement, you would see the same on the platform. I am pretty sure it is a bug.

How can we report a bug?

1 Like

Hello every one i want to share my solution for this excersise this is the code that i did

controls.js

import React, { useContext } from "react";
import { MixtapeContext } from "./MixtapeContext";

export const Controls = () => {
  const { genre, setGenre, setSortOrder } = useContext(MixtapeContext);

  return (
    <div className="controls">
      <select onChange={(event) => setGenre(event.target.value)}>
        <option value="all">All</option>
        <option value="hip hop">hip hop</option>
        <option value="rock">rock</option>
        <option value="pop">pop</option>
        <option>pop</option>
      </select>
      TODO: Genre control? Sort order control?
      <button
        onClick={() =>
          setSortOrder( prev => prev === "ascending" ? "descending" : "ascending")
        }
      >
        sorted
      </button>
    </div>
  );
};

MixtapeContext

import React, { useState } from "react";

export const MixtapeContext = React.createContext();

export const MixtapeProvider = ({ children, songs }) => {
  const [genre, setGenre] = useState("all");
  const [sortOrder, setSortOrder] = useState("ascending");

  return (
    <MixtapeContext.Provider
      value={{ songs, genre, sortOrder, setGenre, setSortOrder }}
    >
      {children}
    </MixtapeContext.Provider>
  );
};

SongList.js

import React, { useContext } from "react";
import { Song } from "./Song";
import { MixtapeContext } from "./MixtapeContext";



export const SongList = () => {
  const { genre, sortOrder, songs } = useContext(MixtapeContext); // Your code here! ✨
  
  const filterSongs = songs.filter((song) =>{
    return genre === 'all' ? true : song.genre === genre
  });
  
  filterSongs.sort((a,b)=>{
    if(sortOrder === 'ascending'){
      return -1
    }else if(sortOrder === 'ascending' ){
      return 1
    }
  })

  return (
    <>
      {filterSongs.map((song) => (
        <Song {...song} key={song.name} />
      ))}
    </>
  );
};

hope this hepfull see you then, happy coding