[Gabarito] [Bloco 18.1] [Correção de nome de variáveis]

Cars.js

import React, { Component } from 'react';
import CarsContext from './context/CarsContext';
import carBlue from './images/carBlue.jpeg';
import carRed from './images/carRed.jpeg';
import carYellow from './images/carYellow.jpeg';

class Cars extends Component {
  render() {
    const { red, blue, yellow } = this.context.cars;
    const { moveCar } = this.context;
    return (
      <div>
        <div>
          <img
            className={red ? 'car-right' : 'car-left'}
            src={carRed}
            alt="red car"
          />
          <button
            onClick={() => moveCar('red', !red)}
            type="button"
          >
            Move
        </button>
        </div>
        <div>
          <img
            className={blue ? 'car-right' : 'car-left'}
            src={carBlue}
            alt="blue car"
          />
          <button
            onClick={() => moveCar('blue', !blue)}
            type="button"
          >
            Move
        </button>
        </div>
        <div>
          <img
            className={yellow ? 'car-right' : 'car-left'}
            src={carYellow}
            alt="yellow car"
          />
          <button
            onClick={() => moveCar('yellow', !yellow)}
            type="button"
          >
            Move
        </button>
        </div>
      </div>
    )
  }
};

Cars.contextType = CarsContext;

export default Cars;

Se chamarmos o método moveCar com as strings 'red', 'blue' e 'yellow' (conforme as chaves do objeto cars no state do Provider), o state original permanece com as mesmas chaves. Do jeito que está no gabarito, além das chaves iniciais, o objeto cars do state do Provider recebe também as chaves redCar, blueCar e yellowCar sem necessidade.

Também seria bom mudar os nomes das variáveis na desestruturação do state:

De:
const { redCar, blueCar, yellowCar } = this.context.cars;

Para:
const { red, blue, yellow } = this.context.cars;