Use this repo to get some practice making small, composable components.
-
Replace the hard-coded
<h1>
inApp.js
with a functional React component (Header.js
). -
Then, set a prop called
name
on yourHeader
component (set the prop inApp.js
).Don't worry, we'll go over
props
in class. Be sure to check out the videos if you need a refresher!
- There are 2 steps involved for utilizing
props
- setting a prop and getting / calling a prop:- Setting
props
- declaring your data. Syntax is like an HTML attribute:
// src/components/App.js <App> <MyComponent myProp="howdy" /> </App>
- Getting
props
- calling and rendering your data. Syntax is like a JavaScript object:
// src/components/MyComponent.js <div> <h2>{props.myProp}</h2> </div>
- Setting
-
Practice cranking out simple, composable Components by creating a list of User Profiles for rendering the data in
users.json
. The structure should be something like this:ListOfUsers.js
UserProfile.js
UserAddress.js
UserAvatar.js
-
Use
props
to pass theusers
data fromindex.js
allllll the way down to your components.
import
the data intoindex.js
and set it as a prop on yourApp
component (in therender
method)- Work in small pieces, one step at a time - and commit your work every time you finish a feature.
- create a new functional component called
UserProfile.js
. For now, just have it return an empty<div></div>
or something. (fix errors, commit your work) import
thesampleUser
intoApp.js
and place it in yourconstructor(props)
as an initialstate
value. (fix errors, commit your work)- set the user data you're holding in
state
as aprop
on the<UserProfile />
component (don't forget toexport
&import
the UserProfile) (fix errors, commit your work) - fix any errors and verify that the
<UserProfile />
is receivingprops
from<App />
by using the React DevTools (fix errors, commit your work) - Now add JSX to
UserProfile.js
that will allow you to render theuser
data fromprops
(fix errors, commit your work)
- Start with the
UserProfile
.- Don't try to do it all at once. Just write the component with statically defined data, and get it rendering:
function UserProfile (props) {
return (
<div>
<h1>User Name</h1>
<a href="mailto:[email protected]">User Email</a>
/* etc */
</div>
);
}
- Now,
import
the data fromsampleUser.json
toindex.js
and pass it down asprops
to yourUserProfile
component. - Once you have data rendering via
props
, you'll want to use.map
to iterate over the Array of user data. If you access user data fromprops
, you'll find that there's a way to easily swap out the single user insampleUser.json
with multiple users inusers.json
.