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.
- My import statements are incorrect
- I need to wrap the SongList component with a “div” element
- I did not pass down the Context correctly or imported the useContext
- I made an error in the MixtapeProvider component
Any suggestions will be appreciated.
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