1.6 TeslaNotice Component

Let’s create a static text part with a TeslaNotice component.

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

import React from 'react';
import './TeslaNotice.css';
const TeslaNotice = () => (
<div className="tesla-battery__notice">
The actual amount of range that you experience will vary based
on your particular use conditions. See how particular use conditions
may affect your range in our simulation model.
Vehicle range may vary depending on the vehicle configuration,
battery age and condition, driving style and operating, environmental
and climate conditions.
export default TeslaNotice;

1.6.1 TeslaNotice Component Style

Next up, create src/components/TeslaNotice directory, create TeslaNotice.css in it and add these styles to your TeslaNotice.css file:

.tesla-battery__notice {
margin: 20px 0;
font-size: 15px;
color: #666;
line-height: 20px;

1.6.2 Import TeslaNotice component in TeslaBattery Container

Next, import TeslaNotice component in TeslaBattery.js:

import TeslaNotice from '../components/TeslaNotice/TeslaNotice';
class TeslaBattery extends React.Component {
render() {
return (
<form className="tesla-battery">
<h1>Range Per Charge</h1>
<TeslaNotice />

We will continue in such a way that components are created in this pattern and imported from the TeslaBattery container.

<?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">
	<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
	<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"/>