In this activity, we will modify a React application to make it more DRY through the use of props.
-
Replace your Create React App's
src
folder with the provided src folder. -
Stop the dev server if it is already running. Start the app in dev mode by running
yarn start
. Open localhost:3000 in your web browser and take a moment to study the rendered app.- This application is the start of a friends list for a social network.
-
Open
src/App.js
in your editor and notice how theSpongebobCard
,MrKrabsCard
, andSquidwardCard
are being rendered inside ofWrapper
, which is in turn being rendered inside of theApp
component. -
Open up each component's files in turn and briefly study the JSX being returned by each. Most importantly, notice how all of the card components render very similar JSX. This isn't very DRY code. We'll fix this by creating a brand new
FriendCard
component and rendering it once for each friend. We'll pass down the differentiating content in the form of props. -
Take a moment to study the
src/friends.json
file. This file contains the data that makes each friend card unique from one another. We'll use this file to pass props down to our newFriendCard
component. -
Import the
src/friends.json
file intosrc/App.js
. This can be achieved with the following syntax:import friends from "./friends.json";
-
Inside of
src/App.js
, remove the imports for each friend's card, and remove the JSX rendering each card inside of this file. -
Create a brand new component named
FriendCard
.-
The
FriendCard
component can initially return the same JSX asSpongebobCard
, and have its own CSS file namedFriendCard.css
which should have the same contents asSpongbobCard.css
. -
Require the
FriendCard
component inside ofsrc/App.js
and render it inside of theWrapper
component. Before going any further, check your browser. If successful, you should only see one card being rendered.
-
-
Still inside of
src/App.js
, use the first friend object in thefriends
JSON file to pass the following props down to your renderedFriendCard
component.-
name
-
image
-
occupation
-
location
-
-
Modify the
FriendCard
component so that it accepts and renders all of the passed props in place of the currently hard coded values. Once complete, check your browser to make sure the firstFriendCard
is still being properly rendered. -
Inside of
src/App.js
, render anotherFriendCard
component for the second and third piece of friend data. Pass down the appropriate JSON data for each as props. If successful, you should see each friend being rendered to the browser, utilizing the same sameFriendCard
component three times.