Vehicles

Create sample static data

nano ./src/data/vehicles.js

export default {
  vehicles: [
    {
      _id: 1,
      make: { name: 'Fiat' },
      model: { name: 'Punto' },
      color: { name: 'Prata' },
      photo: '',
    },
    {
      _id: 2,
      make: { name: 'Honda' },
      model: { name: 'HR-V' },
      color: { name: 'Marrom' },
      photo: '',
    },
    {
      _id: 3,
      make: { name: 'Hyundai' },
      model: { name: 'HB20' },
      color: { name: 'Verde' },
      photo: '',
    },
  ],
};

Create Vehicles List component with static data

nano ./src/components/VehiclesList.js

import React, { Component } from 'react';
import staticData from '../data/vehicles';
import Vehicle from './Vehicle';

class VehiclesList extends Component {
  render() {
    return (
      <div className="VehiclesList">
        {staticData.vehicles.map(vehicle => (
          <Vehicle vehicle={vehicle} key={vehicle._id} />
        ))}
      </div>
    );
  }
}

export default VehiclesList;

Create Vehicle Card component

nano ./src/components/Vehicle.js

import React, { Component } from 'react';

class Vehicle extends Component {
  render() {
    const { make, model, color, photo } = this.props.vehicle;
    const img = photo || 'http://via.placeholder.com/240x180';
    return (
      <div className="Vehicle">
        <img src={img} alt={make.name} />
        <div>
          <b>{make.name} {model.name}</b>
        </div>
        <div>{color.name}</div>
      </div>
    );
  }
}

export default Vehicle;

Add Vehicles List to the App component

nano ./src/components/App.js

import React from 'react';
import logo from '../styles/logo.svg';
import '../styles/App.css';
+ import VehiclesList from './VehiclesList';

class App extends Component {
  render() {
    return (
      <div>
        <header>...</header>
+       <VehiclesList />
      </div>
    );
  }
);

export default App;

Open the app and check if everything is fine

open http://localhost:3000/

Next step: Redux