Class: App

App(props)

A single source of truth for our interface.

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

App is the parent of both the NavBar and Counters components, so the counters array information can be passed as a prop to its children. Therefore, the state and the methods modifying it, are kept in the App. These methods are then passed to its children via props.

Constructor

new App(props)

  • Set up the initial state of the application: a set of four counters

Conceptually, components are like JavaScript functions:

  • They accept arbitrary inputs (called “props”) and
  • return React elements describing what should appear on the screen.
Parameters:
Name Type Description
props Object component input.
Source:
See:

Extends

  • React.Component

Members

state :Object

The state of the application.

React components have a built-in state object which is private to the component.
  • State can not be accessed from outside the class.
  • However, it can be passed as an argument to another component.
Type:
  • Object
Properties:
Name Type Description
state.counters Array.<Object.<id:Number, value:Number>> array of counter objects.
state.setState state_setter setter - change state.
Source:

Methods

handleDecrement(counter)

Update the state property to decrement a given counter.

Parameters:
Name Type Description
counter Object.<id:Number, value:Number> selected counter object.
Source:

handleDelete(counterId)

Update the state property to delete a given counter.

In fact, we buid a new array without the deleted one and update the state.
Parameters:
Name Type Description
counterId Number id of the selected counter.
Source:

handleIncrement(counter)

Update the state property to increment a given counter.

Remember that arrow functions do not rebind this keyword, instead they inherit it.
Also to change the state, we must use setState inherited from the base Component, to update the view, and bring the DOM in sync with the virtual DOM.

Therefore, this.state.counters[indexOf(counter)].value++ will not work. It is necessary to create a new object and pass it to setState.

The setState will schedule an asynchronous call to the render method, which will return a new react element at some point in the future.
Parameters:
Name Type Description
counter Object.<id:Number, value:Number> selected counter object.
Source:

handleReset(counter)

Update the state property to reset all counters to zero.

Parameters:
Name Type Description
counter Object.<id:Number, value:Number> selected counter object.
Source:

render() → {React.Fragment}

Creates a Navbar to totalize the number of counters being used.
Source:
See:
Returns:
a react fragment with a Navbar and a Counters component.
Type
React.Fragment