1.9 State of Application

We need to think about what state is required to be managed in our app. If you look at the final app GIF image at the top of this article, the state values are:

• carstats (object array): An array of battery numerical value objects by car model according to the currently selected condition value (speed, temperature, climate, wheel)

• config (object): Currently selected conditions object (speed: 55, temperature: 20, climate: aricon on, wheel: 19)

That is the single source of truth for our app. Now we will add the constructor method to the TeslaBattery container and set the initial value so that we can manage this state value and pass it to the subcomponent. The TeslaCarcomponent accepts the wheelsize input through props and renders the Tesla car image and spins the wheels.

Both the parent component and the child component do not know whether a particular component is stateful or stateless and do not care whether it is defined as a function or a class. This is why the state is often called local or encapsulated. This state can not be accessed by components other than the component that owns and sets the state. So this state value can be passed to the sub-component as props. This is commonly referred to as a “top-down” or “unidirectional” data flow. Every state is always owned by a particular component, and any data or UI derived from that state only affects the “downward” component of the tree.

In render(), the code in the form const {a, b} = c is ES6 Object Destructuring. It takes the required value out of the object and makes a reference to it.

Conceptually, the React component is like a JavaScript function and receives an arbitrary input called ‘props’ and returns a React element that describes what should be shown.

In a word, this concept can be expressed by the following formula.

fn(d) = V

A function that receives data as input and returns a view.

If you save files, you can see that the rendered Tesla car and wheel animation work well on the updated screen. You can also see that props is passed well in the component tree.

Some functions are called “pure” in the sense that they always return the same output value if they have the same input value without changing the input value. (Pure function) One important React strict rule here is that all React components should behave like pure functions with respect to props. props must be read-only.