Car component

Car.jsx

import React, { Component } from 'react';
import reactLogger from './reactLogger';

const cars = [
  { id: 1, brand: 'Maruti Suzuki', model: 'Alto', year: '2017' },
  { id: 2, brand: 'Honda', model: 'City', year: '2018' },
  { id: 3, brand: 'Tata', model: 'Bolt', year: '2015' },
  { id: 4, brand: 'Ford', model: 'Classic', year: '2013' },
  { id: 5, brand: 'BMW', model: '5 Series', year: '2018' },
];

class Car extends Component {
  constructor(props){
    super(props);
    this.state = {
      id: '',
      brand: '',
      model: '',
      year: '',
    }
  }

  shouldComponentUpdate(nextProps, nextState){
    reactLogger('react-logger', 'ProfilePage', this.props, nextProps, this.state, nextState);
    // write you application logic here.
    return true;
  }

  handleChangeCar = () => {
    const currentCar = cars[Math.floor(Math.random() * 4 + 1)];
    this.setState((prevState) => {
      return {
        ...currentCar
      }
    })
  }

  render() {
    return (
      <div>
        <h1>Select Car is:</h1>
        <p><strong>Brand:</strong> {this.state.brand}</p>
        <p><strong>Model</strong>: {this.state.model}</p>
        <p><strong>Year</strong>: {this.state.year}</p>
        <button onClick={this.handleChangeCar}>Change Car</button>
      </div>
    );
  }
}
 
export default Car;