Jammming part 34

On part 34 of the Jammming project I am not getting the same web page display as the walk through video.
I am getting:

The walk through shows three examples of search results

my code:

the project link:
https://www.codecademy.com/paths/build-web-apps-with-react/tracks/react-capstone/modules/jammming-capstone/projects/jammming-prj

I am also also getting the following errors when compiling
[eslint]
src/Components/App1/Playlist/Playlist.js
Line 12:14: ‘TrackList’ is not defined react/jsx-no-undef

src/Components/SearchResults/SearchResults.js
Line 12:14: ‘TrackList’ is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.
I have imported the Tracklist files so I don’t undersatnd where I am going wrong. Any help will be great.

You export the component TracklList as a default export. Then you need to import the components/module like this:
import TrackList from '/yourPath/yourFile';

How you do it does not import values. From the MDN docs:

Import a module for its side effects only
Import an entire module for side effects only, without importing anything. This runs the module’s global code, but doesn’t actually import any values.
import "/modules/my-module.js";
Copy to ClipboardCopy to Clipboard
This is often used for polyfills, which mutate the global variables.

Awsome. That worked a trest. Thank you.

1 Like

You also didn’t pass any props to <Playlist /> which will throw an error when it renders a <TrackList /> and it has no array to map over

1 Like