In this lab, you'll be building a contact list utilizing the provided data set.
map
through the data set to display a component for each piece of data.- Utilize
props
to pass the data to other components
Here is what the finished application will look like:
Fork
andclone
this repositorynpm i
to install dependencies- Create a
components
folder inside of yoursrc
folder
- Find this list of contacts in your React App's file tree.
- Look at the data structure of the provided contacts.
- Import the contacts data into
App.js
-
import contacts from './data/contacts.json'
console.log
contacts inApp.js
above its return to make sure that you've imported the data correctly
- Create a
Contact.js
file in your components folder. - Analyze the provided mockup and decide what kind of jsx and
props
you'll want in this component. - Import this component into
App.js
- Using the provided contacts, iterate through the array and return a Contact component for each item.
- Provide props to your Contact component to display the data
Don't forget your keys
!
- Use the
App.css
file to style your application, try to get as close to the mockup as possible.
- break up the
Contact
component into smaller components. - Create your own creative version of this contact list.
In this lab, we practiced mapping over a large set of data. We've taken the data provided to display an awesome contact list that others will certainly want to use!