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

to run: npm install, npm start
download source

Multiple Components in Sync

Under components, create a NavBar component.
Make it a basic component with a render and return empty JSX:

import React, { Component } from 'react';

class NavBar extends Component {

render() {

return (

);

}

export default NavBar;

Go to getBootstrap, search for NavBar.

Locate a navbar you like and copy the HTML into our NavBar’s JSX.

Change ‘class’ to ‘className’.

import React, { Component } from 'react';

class NavBar extends Component {

render() {

return (

Navbar

</a>

</nav>

);

}

export default NavBar;

Then import this NavBar into App.js to be used.

import React, { Component } from 'react';

import NavBar from './components/NavBar';

import Counters from './components/counters';

import './App.css';

class App extends Component {

render() {

return (

<React.Fragment>

</main>

</React.Fragment>

);

}

export default App;

Finally, update our index.js to use App.js:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import * as serviceWorker from './serviceWorker';

// insert this

import "bootstrap/dist/css/bootstrap.css";

// import the Counter component

import App from "./App";

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

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: http://bit.ly/CRA-PWA

serviceWorker.unregister();

Now let’s look at our component tree. There’s no parent child relationship between Counters component and NavBar component.
Look at the diagram. How can we display total number of counters in our NavBar? In situations like this where there is no parent child relationships and you want to keep them in sync.

To solve this, we lift state of Counters component up into App, so that it can pass it to all its children.

Lifting State Up

First, we pull everything out from Counters, and put it in App

App.js

Since we brought the state object here, we can safely put handleIncrement and handleDelete here as well.
We pass in the Counters array to Counters component. In Counters component, we loop through that array, and use props to pass data down into each individual Component.

import React, { Component } from 'react';

import NavBar from './components/NavBar';

import './App.css';

import Counters from "./components/counters";

class App extends Component {

state = {

counters: [

{id: 1, value: 0},

{id: 2, value: 0},

{id: 3, value: 0},

{id: 4, value: 0},

{id: 5, value: 0},

]

}

constructor() { super(); }

handleIncrement = counter => {

const counters = [...this.state.counters]; // clone array

const index = counters.indexOf(counter);

counters[index] = {...counter};

counters[index].value++;

this.setState({counters});

}

handleDelete = counterId => {

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

this.setState({ counters: counters });

}

handleReset = () => {

console.log('handleReset');

this.setState({

counters: [

{id: 1, value: 0},

{id: 2, value: 0},

{id: 3, value: 0},

{id: 4, value: 0},

{id: 5, value: 0},

]

})

}

render() {

return (

<React.Fragment>

<NavBar totalCounters = {this.state.counters.filter(c => c.value > 0).length} />

<Counters

counters={this.state.counters}

onReset={this.handleReset}

onIncrement={this.handleIncrement}

onDelete={this.handleDelete}

</main>

</React.Fragment>

);

}

export default App;

Notice that Counters have props onReset, onIncrement, and onDelete. These are callback functions that bubble back up to manipulate our parent array.

The callback onReset is passed to Counters to reset everything. The onIncrement and onDelete are passed into individual Counter components. A Counter component passes the component ID back up for us to increase or delete.

counters.jsx

Here in Counters component, we receive the counters array from App via props.
We then loop through each item in the array and pass associated data down to a Counter component.
We basically bubble events upward from Component. And then have App take care of them.

import React, { Component } from 'react';

import Counter from './counter';

class Counters extends Component {

// onDelete raises an event

// we're bubbling our event up to our parent via props

// In our Parent App.js, it takes care of that event.

render() {

return (

<div>

<button

onClick={this.props.onReset}

className="btn btn-primary btn-sm m-2">

Reset

</button>

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

<Counter

counter={counter}

key={counter.id}

selected={true}

onDelete={this.props.onDelete}

onIncrement={this.props.onIncrement}

))}

</div>

);

}

export default Counters;

counter.jsx

Here is where we apply a lot of UI via css. Notice we do so by looking at the props object passed down from parent.
We use all the data passed down from the parent in order to draw and display what we want.

This is where we also receive events, and then send it up to our parent by calling function references on the props object.

import React, { Component } from "react";

// Component has bunch of methods we are going to inherit into Counter class

class Counter extends Component {

constructor() {

super();

console.log('-- Counter constructor --');

}

getBadgeClasses() {

let classes = "badge m-2 badge-";

classes += this.props.counter.value === 0 ? "warning" : "primary";

return classes;

}

names() { return "btn btn-secondary"; }

formatCount() {

const { value } = this.props.counter;

return value === 0 ? "Zero" : value;

}

render() {

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

return (

<div>

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

<button onClick={ () => this.props.onIncrement(this.props.counter)}

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>

);

}

export default Counter;

In order to show that we have all the counters information, we display the # of counters with more than 0 value up in our NavBar:

import React, { Component } from 'react';

class NavBar extends Component {

render() {

return (

# of counters: {this.props.totalCounters}

</a>

</nav>

);

}

export default NavBar;