API

import React from 'react';
import axios from 'axios';
import '../App.css';

export default class CarList extends React.Component {
    constructor() {
        super();
        this.state = {
            cars: '',
            isLoaded: false,
        };
    }

    componentDidMount() {
        axios.get(`https://next.json-generator.com/api/json/get/41ORKNZDU`).then(response => {
            console.log(Object.values(response)[0].data.engine.items[2].type) // tentar pegar só um elemento isolado
            this.setState({ cars: response.data });
        });
    }
    render() {
        return (
            <div>
                <span id="engine-span">Engine</span>
                <div id="engine-div">
                    {this.state.cars &&
                        <div>
                        <React.Fragment>
                            <div>
                            <ul>
                            <div className="engine-type">
                            <div id="engine-img">
                                {
                                (this.state.cars.data.engine.items.map(car =>
                                <img src={car.image} key={car.id} alt="Logo"/>

                                ))}
                                </div>
                                {
                                (this.state.cars.data.engine.items.map(car =>
                                <p key={car.id}><span id="engine-type-kwhInit">{car.kwh}</span>&#160;<span id="engine-type-span-type">{car.type}&#160;</span>
                                <span id="engine-type-span-kwh">{car.kwh}&#160;</span>kWh<span id="engine-type-span-range">{car.range}</span>&#160;miles range
                                <label id="theLabel" htmlFor="theRadio"><input type="radio" className="theRadio" name="radio"/></label></p>))
                                }
                                </div> {/* Tentando separar os consumos da api em divs para o css */}
                            </ul>
                            </div>
                        </React.Fragment>
                        </div>
                    }
                        </div>
                </div>
               )
    };
}