The next step is to create an add functionality for the frontend. We will implement that using the React Skylight modal component. We already went through the usage of React Skylight in Chapter 8, Useful Third-Party React Components for React. We will add the New Car button to the user interface, which opens the modal form when it is pressed. The modal form contains all the fields that are required to save the car as well as the button for saving and canceling.

Stop the development server by pressing Ctrl + C in the terminal, and type the following command to install React Skylight. After installation, restart the app:

npm install react-skylight --save

The following steps show how to create add functionality using the modal form component:

1. Create a new file, called AddCar.js, in the components folder and write a component-class base code to the file, as shown here. Add the import for the react-skylight component:

import React from 'react';
import SkyLight from 'react-skylight';

class AddCar extends React.Component {
  render() {
    return (
      <div>
      </div> 
    );
  }
}

export default AddCar;

2. Introduce a state that contains all car fields:

constructor(props) {
   super(props);
   this.state = {brand: '', model: '', year: '', color: '', price: ''};
}

3. Add a form inside the render() method. The form contains the ReactSkylight modal form component with buttons and the input fields that are needed to collect the car data. The button that opens the modal window, and will be shown in the carlist page, must be outside ReactSkylight. All input fields should have the name attribute with a value that is the same as the name of the state the value will be saved to. Input fields also have the onChange handler, which saves the value to state by invoking the handleChange function:

handleChange = (event) => {
   this.setState(
     {[event.target.name]: event.target.value}
   );
}
   
render() {
    return (
      <div>
        <SkyLight hideOnOverlayClicked ref="addDialog">
          <h3>New car</h3>
          <form>
            <input type="text" placeholder="Brand" name="brand" 
              onChange={this.handleChange}/><br/> 
            <input type="text" placeholder="Model" name="model" 
              onChange={this.handleChange}/><br/>
            <input type="text" placeholder="Color" name="color" 
              onChange={this.handleChange}/><br/>
            <input type="text" placeholder="Year" name="year" 
              onChange={this.handleChange}/><br/>
            <input type="text" placeholder="Price" name="price" 
              onChange={this.handleChange}/><br/>
            <button onClick={this.handleSubmit}>Save</button>
            <button onClick={this.cancelSubmit}>Cancel</button>     
          </form> 
        </SkyLight>
        <div>
            <button style={{'margin': '10px'}} 
              onClick={() => this.refs.addDialog.show()}>New car</button>
        </div>
      </div> 
    );

4. Insert the AddCar component to the Carlist component to see whether that form can be opened. Open the Carlist.js file to editor view and import the AddCar component:

import AddCar from './AddCar.js';

5. Implement the addCar function to the Carlist.js file that will send the POST request to the backend api/cars endpoint. The request will include the new car object inside the body and the 'Content-Type': 'application/json' header. The header is needed because the car object is converted to JSON format using the JSON.stringify() method:

// Add new car
addCar(car) {
  fetch(SERVER_URL + 'api/cars', 
    { method: 'POST', 
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(car)
    })
  .then(res => this.fetchCars())
  .catch(err => console.error(err))
} 

6. Add the AddCar component to the render() method and pass the addCar and fetchCars functions as props to the AddCar component that allows us to call these functions from the AddCar component. Now the return statement of the CarList.js file should look like the following:

// Carlist.js 
return (
  <div className="App">
    <AddCar addCar={this.addCar} fetchCars={this.fetchCars}/>
    <ReactTable data={this.state.cars} columns={columns} 
      filterable={true} pageSize={10}/>
    <ToastContainer autoClose={1500}/> 
  </div>
);

If you start the frontend app, it should now look like the following, and if you press the New Car button, it should open the modal form:

7. Implement the handleSubmit and cancelSubmit functions to the AddCar.js file. The handleSubmit function creates a new car object and calls the addCar function, which can be accessed using props. The cancelSubmit function just closes the modal form:

// Save car and close modal form
handleSubmit = (event) => {
   event.preventDefault();
   var newCar = {brand: this.state.brand, model: this.state.model, 
     color: this.state.color, year: this.state.year, 
     price: this.state.price};
   this.props.addCar(newCar); 
   this.refs.addDialog.hide(); 
}

// Cancel and close modal form
cancelSubmit = (event) => {
  event.preventDefault(); 
  this.refs.addDialog.hide(); 
}

Now, you can open the modal form by pressing the New Car button. Then you can fill the form with data, and press the Save button. So far, the form does not look nice, but we are going to style it in the next chapter:

The list page is refreshed, and the new car can be seen in the list: