MusicPedia is an app where people can find information about different famous musicians. This information is stored in the object titled artistData
at the top of the App.js
file.
Let's use what we learned about React to complete the app.
When it's done, it should look like this.
-
First, let's make sure our ArtistCard component is linked correctly. Use import/export in the appropriate places to make this happen.
-
In ArtistCard.js, our component is looking a little sad - all we have is an empty div. Nest an
h2
tag to hold the name of the artist. Check that you use the prop name correctly. -
We have some the name of our artist, but we have more data to use! In App.js, add an image prop and a famousSongs prop to the ArtistCard instance.
-
In ArtistCard.js, nest an
img
tag and assign the src to the appropriate prop name. Include analt
property in the tag and equal it to the string "artist". -
Continue by adding a
p
tag to display the famous songs.
This looks better, but we still have more artists to display!
-
In App.js, add 2 more instances of the ArtistCard component (there should be 3 total).
-
Be sure to display the data of the next artist (hint: array indexes)
Success! All three artist cards should be displaying now :)
Finish early?:
- Try to combine your knowledge of React AND the
map()
method to complete this exercise