TIL/2021–02–01&02

7 min readFeb 2, 2021

Day 53 and 54: Treehouse Full Stack JavaScript Techdegree

Unidirectional Data Flow

In React data naturally flows down the component tree, from the app’s top level component down to the child components via props

For example, in our scoreboard, the App component tells the player component all about a player by passing information via props, it also tells the header component the total number of players

If our data comes from one place, React will flow any data changes from the top going down to the component tree, updating each component

And this is called unidirectional data flow

— — —

Lifting State Up

In React, two or more components can share the same state. For example, in our App component, the players state is shared to the Header and Player components through props.

Our Counter component has the score state which can only be accessed locally within the counter component since that is where we set the state. Eventually, we need access to the score state to determine who has the highest score and such

When two or more components needs access to the same state, we move the state into the common parent which is called lifting state up.

So we will lift up the score state to the app component which is the common parent

— —

Communicating between components

The buttons in the counter need to modify the state that lives in the app component

When the data flow is unidirectional (data changes goes from top to bottom) how does the child component like counter gets information back up to its ancestor parent component? Instead of passing state to a child component, a parent can pass a callback function

The callback will allow you to communicate events and changes in your data upwards, while data continues to flow downwards

We can write event handlers that manipulate state and pass them down to components as callback functions

On app.js

import React, { Component } from “react”;

import Header from “./Header.js”;

import Player from “./Player.js”;

class App extends Component {

state = {

players: [

{

score: 0,

id: 1,

{

score: 0,

id: 2,

{

score: 0,

id: 3,

{

score: 0,

id: 4,

};

handleRemovePlayer = (id) => {

this.setState((prevState) => {

return {

players: prevState.players.filter((p) => p.id !== id),

};

});

};

handleScoreChange = (delta) => {

// this.setState((prevState) => ({

// score: prevState.score + delta,

// }));

console.log(delta);

};

render() {

return (

{/* Players list */}

{this.state.players.map((player) => (

<Player

{…player}

handleScoreChange={this.handleScoreChange}

key={player.id.toString()}

removePlayer={this.handleRemovePlayer}

))}

</div>

);

}

export default App;

Then on Player.js add the handleScoreChange as a prop to pass on to counter

Counter

score={props.score}

handleScoreChange={props.handleScoreChange}

Then on Counter

We can add an onClick event handler with a callback function to handleScoreChange

import React from “react”;

const Counter = (props) => {

return (

<button

className=”counter-action decrement”

onClick={() => {

props.handleScoreChange(-1);

}}

{“ “}

-{“ “}

</button>

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

<button

className=”counter-action increment”

onClick={() => props.handleScoreChange(+1)}

{“ “}

+{“ “}

</button>

</div>

);

};

export default Counter;

Don’t forget, it has to be an arrow function to be a callback

— —

Update state based on a player’s index

The map callback function takes an optional index parameter that contains the index of the current item being processed in the array

handleScoreChange = (delta, index) => {

// this.setState((prevState) => ({

// score: prevState.score + delta,

// }));

console.log(`index:${index}, delta:${delta}`);

};

{this.state.players.map((player, index) => (

<Player

index={index}

{…player}

handleScoreChange={this.handleScoreChange}

key={player.id.toString()}

removePlayer={this.handleRemovePlayer}

))}

On Player

<Counter

index={props.index}

score={props.score}

handleScoreChange={props.handleScoreChange}

On Counter

const Counter = (props) => {

const index = props.index;

return (

<button

className=”counter-action decrement”

onClick={() => {

props.handleScoreChange(-1, index);

}}

{“ “}

-{“ “}

</button>

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

<button

className=”counter-action increment”

onClick={() => props.handleScoreChange(+1, index)}

{“ “}

+{“ “}

</button>

</div>

);

};

Now each player logs their distinct index

handleScoreChange = (delta, index) => {

this.setState((prevState) => ({

score: (prevState.players[index].score += delta),

}));

};

And now it works

— — -

Building the statistics component

The problem with out old structure is that the score state was kept locally in the Counter component — and if we need access to the total scores we cannot do that. But since we were able to lift up the state to the common or main parent, any component can have access to the score state.

On app.js

On header.js

import React from “react”;

import Stats from “./Stats”;

const Header = (props) => {

return (

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

</header>

);

};

export default Header;

Then the newly created Stat.js

import React from “react”;

const Stats = (props) => {

const totalPlayers = props.players.length;

const totalPoints = props.players.reduce((total, player) => {

return (total += player.score);

}, 0);

return (

<tbody>

<tr>

<td>Players:</td>

<td>{totalPlayers}</td>

</tr>

<tr>

<td>Total Points:</td>

<td>{totalPoints}</td>

</tr>

</tbody>

</table>

);

};

export default Stats;

— — —

Controlled components

Adding players

For JSX, JSX requires input tags to be a self-closing element

In React, we need to handle a form element’s state explicitly.

Normally, when a user types into an input text field the user changes the state of the text field

To manage our input field’s state we have to build a controlled component — a controlled component renders a form that controls what happens in that form on subsequent user input.

It is a form element whose value is controlled by React with a state.

Creating a controlled component:

Initialize state for the value of the input
Listen for changes on the input to detect when the value is updated
Create an event handler that updates the value state

import React, { Component } from “react”;

class AddPlayerForm extends Component {

state = {

value: “”,

};

handleValueChange = (e) => {

this.setState({ value: e.target.value });

};

render() {

console.log(this.state.value);

return (

<form>

<input

type=”text”

value={this.state.value}

onChange={this.handleValueChange}

placeholder=”Enter a player’s name”

</form>

);

}

export default AddPlayerForm;

The state updates as we type

We now have a controlled input, meaning that we manually managed the value state of the component

— — —

Adding Items to State

Currently the AddPlayerForm component has no access to the players state in App component and the AddPlayerForm state is a local state

In order to add a new player to the state, AddPlayerForm needs access to the players state. So that it can update it with the submitted data

If we don’t do .preventDefault() — it will result in the browser posting a request back to the server. That would cause our application to reload in the browser — meaning we would lose the data we just typed

addPlayerForm.js

import React, { Component } from “react”;

class AddPlayerForm extends Component {

state = {

value: “”,

};

handleValueChange = (e) => {

this.setState({ value: e.target.value });

};

handleSubmit = (e) => {

e.preventDefault();

this.props.addPlayer(this.state.value);

this.state.value = “”;

//or use this.setState({value: ‘’})

};

render() {

return (

<input

type=”text”

value={this.state.value}

onChange={this.handleValueChange}

placeholder=”Enter a player’s name”

</form>

);

}

export default AddPlayerForm;

App.js

handleAddPlayer = (name) => {

this.setState({

players: [

…this.state.players, //Represents all existing players on the scoreboard. We are just adding the following object

{

score: 0,

id: this.state.players.length + 1,

});

};

We used the spread operator to unpack the array and then add the new player

— — — -

Update the players state based on the previous state

handleAddPlayer = (name) => {

this.setState((prevState) => {

return {

players: [

…prevState.players,

{

score: 0,

id: this.state.players.length + 1,

};

});

};

handleAddPlayer = (name) => {

const newPlayer = {

name,

score: 0,

id: this.state.players.length + 1,

};

this.setState((prevState) => {

return {

players: prevState.players.concat(newPlayer),

};

});

};

If not return

handleAddPlayer = (name) => {

const newPlayer = {

name,

score: 0,

id: this.state.players.length + 1,

};

this.setState((prevState) => ({

players: prevState.players.concat(newPlayer),

}));

};

By just using the () parenthesis in replacement of the curly brackets {}

— — -

React flows any data changes at the top down through the component tree updating each component

Can two or more components access and share the same state? Yes. A parent component can pass state down to its children via props

When two or more components need access to the same state, we hoist the state into their common parent — lifting state

TIL/2021–02–01&02

Written by Renzo Regio