Using the Grid component

Material-UI provides a Grid component that can be used to get a grid layout to your React app. We will use Grid to get the New Item button and the Export CSV link on the same line.

Add the following import to the Carlist.js file to import the Grid component:

import Grid from '@material-ui/core/Grid';

Next, we wrap AddCar and CSVLink inside the Grid components. There are two types of Grid components—a container and an item. AddCar and CSVLink are wrapped inside the item type Grid components. Then, both item Grid components are wrapped inside the container type Grid component:

// Carlist.js render() method
return (
  <div className="App">
    <Grid container>
      <Grid item>
        <AddCar addCar={this.addCar} fetchCars={this.fetchCars} />
      </Grid>
      <Grid item style={{padding: 15}}>
   ...