Mosh React tutorial (part 3) | Chinese Rule of Eight

final source
to run: npm install, npm start

Composing Components

React App is a tree of components

Add new component in components folder.
Create counters.jsx

In index.js, instead of , we put

index.js

1 2	import Counters from "./components/counters"; ReactDOM.render(<Counters />, document.getElementById("root"));

Go to counters.jsx and put the code template there by doing:

imrc + tab
cc + tab

Throw in some Counter components like so:

import React, { Component } from 'react';

import Counter from './counter';

class Counters extends Component {

state = { }

render() {

return (<div>

</div> );

}

export default Counters;

Then on the screen, you’ll see your multiple counters appear.

However, it’s all hardcoded. Let’s do it via an array instead. We create an array counters with id and value objects. Then we map through this array and pass each object into a component Counter.

That way, each Counter component will have its own id and unique value.

import React, { Component } from 'react';

import Counter from './counter';

class Counters extends Component {

state = {

counters: [

{id: 1, value: 0},

{id: 2, value: 0},

{id: 3, value: 0},

{id: 4, value: 0},

{id: 5, value: 0},

]

}

render() {

return (<div>

{this.state.counters.map(counter => <Counter key={counter.id} />)}

</div> );

}

export default Counters;

The only thing we didn’t do here is pass the value.
Passing values as parameter takes two steps. One is to create a prop called value, and we pass in the counter.value that way. While we’re at it, let’s create another prop ‘selected’.

render() {

return (<div>

{

this.state.counters.map(counter =>

<Counter key={counter.id} value={counter.value} selected={true} />)

}

</div> );

}

The second step is to go to Counters and receive that prop.
counter.jsx

render() {

console.log('props', this.props);

return (

...

);

}

A props is just a plan JS object that includes all attributes in the Component. In your Counters component, put a console log props in the render function. Make sure you put different values in your array in your Counters components

Now when you run the app, look at the console:

props {value: 4, selected: true} <-- Counter component render

props {value: 2, selected: true} <-- Counter component render

props {value: 3, selected: true} <-- Counter component render

props {value: 1, selected: true} <-- Counter component render

props {value: 8, selected: true} <-- Counter component render

You’ll notice that the whatever value we give to the props will be reflected in that Counter component’s JS object props

Now, create lifecycle componentWillMount and assign the props into the state:

counter.jsx

async componentWillMount() {

console.log(`Counter - componentWillMount `);

this.setState({count: this.props.value})

};

We do this because we want to assign the state property count to have the value from props.
Now you should see the values reflected in our counters.

Children property

Now let’s check out the children’s property in prop object.

In Counters, edit the Counters JSX so that it has a ending tag. Then, insert some JSX within our Counter component

counters.jsx

<h4>Testing 1 2 3</h4>

</Counter>

Then, if we were to look at Counter component’s prop object, we see a children property. Children is a React Element.

counter.jsx

render() {

console.log('props', this.props);

...

}

children:
$$typeof: Symbol(react.element)
key: null
props: {children: “Testing 1 2 3”}
ref: null
type: “h4”

Because its a React Element we can put it within our JSX and thus be able to output it into our webpage like so:

counter.jsx

render() {

return (

<div>

{this.props.children}

<span className={this.getBadgeClasses()}>{this.formatCount()}</span>

<button onClick={ () => this.handleIncrement({id: 1})}

className={this.names()}>

click me

</button>

</div>

);

}

You’ll see the h4 JSX you entered into Counter’s component appear.

Of course, we can keep going and put dynamic data there to make it more useful by adding each counter’s id. That way each Counter component will receive the id as children property and display it.

counters.jsx

render() {

console.log('Counters render');

return (<div>

{

this.state.counters.map(counter =>

<h4>Counter #{counter.id}</h4>

</Counter>

)

}

</div>

Now, we display the counter ID as they appear.

Prop vs State

Prop is data we give to Component. Prop is read-only. We cannot re-assign.
State is data that is local/private to the Component.

Raising and handling Events

In Counter, we put in a delete button. When clicked, we want to delete the data object from counters.
So we throw in handleDelete function for when clicked.

counter.jsx

render() {

console.log('props', this.props);

return (

<div>

<span className={this.getBadgeClasses()}>{this.formatCount()}</span>

<button onClick={ () => this.handleIncrement()}

className={this.names()}>

click me

</button>

<button onClick={this.handleDelete} className="btn btn-danger btn-sm m-2">Delete</button>

</div>

);

}

However, in handleDelete, we want to remove the object from the array in Counters, which is in a another Component altogether! How should we go about doing this?

The component that owns a piece of the state, should be the one modifying it.

In Counter’s onDelete function, we raise an event. And Counters will handle this event.

On the Counters side, we must implement handleDelete() to handle this event.

Counters

In Counters, we first create handleDelete function. We then pass in a reference to this function into a Counter via property onDelete.

handleDelete = counterId => {

console.log('Delete Handled: ' + counterId);

// give me the counter where its key DOES NOT EQUAL the counterId

// essentially, we want to filter OUT our counterId (remove it from our array)

const counters = this.state.counters.filter(c => c.id !== counterId);

// now that our counters array have filtered out our counterId, we re-set it to our state object

this.setState({

counters: counters

});

}

render() {

console.log('Counters render');

return (<div>

{

this.state.counters.map(counter =>

<Counter

key={counter.id}

id={counter.id}

value={counter.value}

selected={true}

onDelete={this.handleDelete}>

</Counter>

)

}

</div> );

}

Counter.jsx

Whenever the delete button is pushed in Counter, it calls on the reference to Counters’s onDelete via the prop object. Of course, we pass in the id of the Counter we want to delete. Then in Counters, it removes the Counter with that id from its state array.

render() {

console.log('props', this.props);

return (

<div>

<span className={this.getBadgeClasses()}>{this.formatCount()}</span>

<button onClick={ () => this.handleIncrement()}

className={this.names()}>

click me

</button>

<button onClick={() => this.props.onDelete(this.props.id)} className="btn btn-danger btn-sm m-2">Delete</button>

</div>

);

}

As you can see, we pass in the id into the Counter component’s prop. So in Counter component, this.props.id is the id of the counter. When we trigger the callback onDelete, we pass this id back to counters, which then filters out the counter object from its state’s array ‘counters’. Thus, successfully removing the counter.

Improvements

If you look at the render function of Counters, we’ll notice we have many props. It gets repetitive

<Counter

key={counter.id}

id={counter.id}

value={counter.value}

selected={true}

onDelete={this.handleDelete}>

</Counter>

What we can instead is simply pass in a counter object instead. Make sure you keep the key prop. If you don’t, React has no way to keep tract of the items and even though your data is correct, what you see on UI will not be.

render() {

return (

<div>

{this.state.counters.map(counter => (

<Counter

counter={counter}

key={counter.id}

selected={true}

onDelete={this.handleDelete}

/> ))}

</div>

);

}

Make sure you update your prop access in counter.jsx. Search and find any this.prop, and add a counter behind it.

counter.jsx

async componentWillMount() {

this.setState({count: this.props.counter.value})

};

render() {

return (

<div>

<span className={this.getBadgeClasses()}>{this.formatCount()}</span>

<button onClick={ () => this.handleIncrement()}

className={this.names()}>

click me

</button>

<button onClick={() => this.props.onDelete(this.props.counter.id)} className="btn btn-danger btn-sm m-2">Delete</button>

</div>

);

}