Day 49: Treehouse Full Stack JavaScript Techdegree

React Basics Part 2:

Use props to create reusable components

Props pass data from a parent component down to a child component

const Header = (props) => {

return (

<header>

<h1>{props.title}</h1>

<span className=”stats”>Players: {props.totalPlayers}</span>

</header>

);

};

const Player = (props) => {

return (

<div className=”player”>

<span className=”player-name”>{props.name}</span>

<Counter score={props.score} />

</div>

);

};

const Counter = (props) => {

return (

<div className=”counter”>

<button className=”counter-action decrement”> — </button>

<span className=”counter-score”>{props.score}</span>

<button className=”counter-action increment”> + </button>

</div>

);

};

const App = () => {

return (

<div className=”scoreboard”>

<Header title=”Scoreboard” totalPlayers={1} />

{/* Players list */}

<Player name=”Renzo” score={1} />

</div>

);

};

ReactDOM.render(<App />, document.getElementById(“root”));

Components facilitate what’s known as separation of concerns — each component on your UI should be responsible for on thing only, and shouldn’t contain extra code that handles other things. Each component addresses a specific concern

For example, counter is responsible for displaying the score

Player is responsible for displaying the player info like the name and score counter

— — -

Iterating and Rendering with Map

Ideally in our app, we would have an array of players render a Player component for each player in the array. Instead of hardcoding the info, we should use an object or an array that we can loop through

const players = [

{

name: “Guil”,

score: 50,

},

{

name: “Treasure”,

score: 85,

},

{

name: “Ashley”,

score: 95,

},

{

name: “James”,

score: 80,

},

];

Then we’ll pass the array of objects to the JSX of the App component

ReactDOM.render(

<App initialPlayers={players} />,

document.getElementById(“root”)

);

And then to use the players props inside the app function

Now we have access to

const App = (props) => {

console.log(props.initialPlayers);

return (

<div className=”scoreboard”>

<Header title=”Scoreboard” totalPlayers={1} />

{/* Players list */}

<Player names=”Renzo” score={1} />

</div>

);

};

What we need to do is iterate over the array and return a player component for each object in the array

const players = [

{

name: “Guil”,

score: 50,

},

{

name: “Treasure”,

score: 85,

},

{

name: “Ashley”,

score: 95,

},

{

name: “James”,

score: 80,

},

];

const Header = (props) => {

return (

<header>

<h1>{props.title}</h1>

<span className=”stats”>Players: {props.totalPlayers}</span>

</header>

);

};

const Player = (props) => {

return (

<div className=”player”>

<span className=”player-name”>{props.name}</span>

<Counter score={props.score} />

</div>

);

};

const Counter = (props) => {

return (

<div className=”counter”>

<button className=”counter-action decrement”> — </button>

<span className=”counter-score”>{props.score}</span>

<button className=”counter-action increment”> + </button>

</div>

);

};

const App = (props) => {

return (

<div className=”scoreboard”>

<Header title=”Scoreboard” totalPlayers={props.initialPlayers.length} />

{/* Players list */}

{props.initialPlayers.map((player) => (

<Player name={player.name} score={player.score} />

))}

</div>

);

};

ReactDOM.render(

<App initialPlayers={players} />,

document.getElementById(“root”)

);

— —

But an error shows up

Use keys to keep track of elements

Key

  • A unique identifier that gives React a way to quickly and reliably identify and element in the list.

First we’ll add an id property on each object in the array as so:

const players = [

{

name: “Guil”,

score: 50,

id: 1,

},

{

name: “Treasure”,

score: 85,

id: 2,

},

{

name: “Ashley”,

score: 95,

id: 3,

},

{

name: “James”,

score: 80,

id: 4,

},

];

Then we’ll add a new prop named key to the Player component

The react docs recommends that we use a string as the key value

const App = (props) => {

return (

<div className=”scoreboard”>

<Header title=”Scoreboard” totalPlayers={props.initialPlayers.length} />

{/* Players list */}

{props.initialPlayers.map((player) => (

<Player

name={player.name}

score={player.score}

key={player.id.toString()}

/>

))}

</div>

);

};

And now the error is gone and each player now has a key prop

Not all react elements need a key prop — pass a key prop anytime you are creating elements by iterating over an array of items that will be rearranged, added or deleted in your UI

Basically, add a key prop when you’re iterating over an array

The key will help identify which items were changed added or removed from the DOM

Changes in your data result in changes to the UI and when changes are made to the UI your data changes in response — state is used to store information about a component that can change over time

— — -

A component can change the value of the props given to it. False, props are read only or immutable. A component can only read the props given to it, never change them.

Which property should you provide to components generated by iterating over an array? Key

Props pass data from a parent component down to its child components

— — —