/**
 * Componente de imagem
 */

const CarImage = ({ img }) => <img src={img} />

/**
 * Componente de radio
 */

const CarChoice = ({ car, index, selectedEngine }) => (
  <input
    name="car-choice" // esse nome tem que ser o mesmo, o radio identifica seu grupo pelo name
    value={index} // com esse value a gente acha a imagem correspondente do array
    checked={selectedEngine === index} // vendo se o selecionado é esse aqui
  />
);

class CarCustomization extends Component {
  state = {
    selectedEngine: 0,
  };

  componentWillMount() {
    fetchStuff().then(this.setState);
  }

  render() {
    // Aqui a gente checa antes se ainda não tem pra já retornar cedo e economizar processamento
    if (!this.state.cars)
      return <Loading />

    return (
      <div>
        <CarImage img={this.state.cars[this.state.selectedEngine].image} />
                                    // esse index aqui é o indíce do elemento que está sendo acessado no map
        {this.state.cars.map((car, index) => <CarChoice car={car} index={index} selectedEngine={this.state.selectedEngine} />)}
      </div>
    )
  }
}