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.

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,

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.

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.