I cannot bring json information to html

Question

I’d like to get the names of the Pokemons and the images.

I use the following code:

import React, { Component } from 'react';
import api from "../../services/api";
import './styles.css';

export default class Main extends Component {
    state = {
        pokemons: [],
    }

    componentDidMount(){
        this.loadpokemon();
    }

    loadpokemon = async () => {
        const response = await api.get('/type/electric');

        this.setState({ pokemons: response.data.pokemon})
        console.log(this.state);
    }


    render(){
    return //<h1>total: {this.state.pokemons.length}</h1> Esse codigo funciona
    (  
        
        <div className='pokemon-list'>
            {this.state.pokemons.map( pokemon => (
                <h2>{pokemon.name}</h2>
            ))} 
        </div>
    );
    }
}

For which I receive the error:

Failed to compile
./src/pages/main/index.js
  Line 24:5:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

Answer 1

The problem is because every interaction of the objects contained in this array there is another object named after pokemon And I think I’m confused about that, but you always need to look at the type of data of each key and value. In the example with your image each object is represented by:

{
    pokemon: { name: '', url: '' },
    slot: 1
}

that is, to recover name and url has to pass the name of this key that is object pokemon and your keys name and url, getting pokemon.name and pokemon.url, final solution:

class App extends React.Component {
    state = {
        pokemons: []
    }
    componentDidMount(){
        this.loadPokemons();
    }
    loadPokemons() {
      const pokemons = [
        {pokemon: {name:'pikachu 1', url: 'https://pokeapi.co/api/v2/pokemon/25'}, slot: 1},
        {pokemon: {name:'pikachu 2', url: 'https://pokeapi.co/api/v2/pokemon/25'}, slot: 1},
        {pokemon: {name:'pikachu 3', url: 'https://pokeapi.co/api/v2/pokemon/25'}, slot: 1}
      ];
      this.setState({pokemons});
    }
    render() {
      return (
        <div className='pokemon-list'>
            {this.state.pokemons.map((item ,index) => (
              <div key={index}>
                <div>{item.pokemon.name}</div>
              </div>
            ))} 
        </div>
      )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

I made a change in the anonymous role to (item, index) the variables' names are more readable