1.5 TeslaBattery Container

In our app, the TeslaBattery component is responsible for creating and managing data and state as Container Component, passing it to other Presentational Components, performing a callback function and changing its state.

By inheriting React.Component, TeslaBattery must have a render method, optionally it can initialize its state through the constructor, and implement other methods such as lifecycle callbacks.

lifecycle callbacks are useful when you want to render or update components, or to receive notifications at different stages of lifecycle.

Create the src/containers directory, create a TeslaBattery.js file in it, and enter the following code:

Press + to interact
import React from 'react';
import './TeslaBattery.css';
class TeslaBattery extends React.Component {
render() {
return (
<form className="tesla-battery">
<h1>Range Per Charge</h1>
</form>
)
}
}
export default TeslaBattery;

1.5.1 TeslaBattery Container Style

TeslaBattery.css only holds a minimal style.

Press + to interact
.tesla-battery {
width: 1050px;
margin: 0 auto;
}
.tesla-battery h1 {
font-family: 'RobotoNormal';
font-weight: 100;
font-size: 38px;
text-align: center;
letter-spacing: 3px;
}

The components to be created in the future will be configured in the TeslaBattery container sequentially.

<?xml version="1.0" ?>
<svg width="1600px" height="208px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 13" enable-background="new 0 0 100 13" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M0,0c0.3,1.1,1.3,2.3,2.6,2.6h4.1l0.2,0.1V13h2.5V2.7l0.2-0.1h4.1c1.4-0.4,2.3-1.5,2.6-2.6v0L0,0L0,0z"/>
	<path fill="#FFFFFF" d="M77.8,13c1.3-0.5,2-1.5,2.2-2.6H68.7l0-10.5l-2.5,0v13H77.8z"/>
	<path fill="#FFFFFF" d="M47.3,2.6h9C57.6,2.2,58.8,1.2,59,0L44.8,0v7.7h11.6v2.7l-9.1,0c-1.4,0.4-2.6,1.4-3.2,2.6l0.7,0H59V5.2
		H47.3V2.6z"/>
	<polygon fill="#FFFFFF" points="85.4,5.2 85.4,13 88,13 88,7.8 97.1,7.8 97.1,13 99.7,13 99.7,5.2"/>
	<path fill="#FFFFFF" d="M25.2,2.6h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,1.2,23.9,2.3,25.2,2.6"/>
	<path fill="#FFFFFF" d="M25.2,7.8h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,6.3,23.9,7.5,25.2,7.8"/>
	<path fill="#FFFFFF" d="M25.2,13h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,11.6,23.9,12.8,25.2,13"/>
	<path fill="#FFFFFF" d="M87.7,2.6h9.7c1.3-0.3,2.4-1.5,2.6-2.6H85C85.3,1.2,86.3,2.4,87.7,2.6"/>
</g>
</svg>