Как добавить объект в массив объектов в react?

Как добавить объект в массив объектов в react?

import React, {Component} from 'react';
import './App.css';
import Car from './Car/Car'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cars: [
                {name: 'Ford', year: 2018},
                {name: 'Audi', year: 2016},
                {name: 'Mazda', year: 2010}
            ],
            pageTitle: 'React components',
            showCars: false,
            newCar: {}
        }
    }

    toggleCarsHandler = () => {
        this.setState({
            showCars: !this.state.showCars
        })
    }
    onChangeName(name, index) {
        const car = this.state.cars[index]
        car.name = name
        const cars = [...this.state.cars]
        cars[index] = car
        this.setState({cars})
    }
    deleteHandler(index) {
        const cars = this.state.cars.concat()
        cars.splice(index, 1)
        this.setState({cars})
    }
    render() {
        const divStyle = {
            textAlign: 'center'
        }
        let cars = null
        if (this.state.showCars) {
            cars = this.state.cars.map((car, index) => {
                return (
                    <Car
                        key={index}
                        name={car.name}
                        year={car.year}
                        onDelete={this.deleteHandler.bind(this, index)}
                        onChangeName={event => this.onChangeName(event.target.value, index)}
                    />
                )
            })
        }
        return (
        <div style={divStyle}>
            <h1>{this.props.title}</h1>
            <button
                onClick={this.toggleCarsHandler}
            >Toggle cars
            </button>
            <input type="text" placeholder={"name"}/>
            <input type="text" placeholder={"year"}/>
            <div style={{
                width: 400,
                margin: 'auto',
                paddingTop: '20px'
            }}>
                {cars}
            </div>
        </div>
       );
    }
}
export default App;

Поля этого объекта вводит пользователь через input. Есть пример с удалением и апдейтом объектов из state. Помогите с добавлением.

import React from 'react'
import Radium from "radium";
import './Car.css'
const Car =  props => {
    const inputClasses = ['input']
    if (props.name !== '') {
        inputClasses.push('green')
    }
    else {
        inputClasses.push('red')
    }
    if(props.name.length > 4){
        inputClasses.push('bold')
    }
    const style = {
        border: "1px solid #ccc",
        ':hover': {
            border: "1px solid #aaa"
        },
        ':first-child': {
            background: 'red'
        }
    }
    return (
        <div className="Car" style={style}>
            <h3>Сar name: {props.name}</h3>
            <p>Year: <strong>{props.year}</strong></p>
            <input type="text" onChange={props.onChangeName} value={props.name} className={inputClasses.join(' ')}/>
            <button onClick={props.onDelete}>Delete</button>
        </div>
    )
}
 export default Radium(Car)