I cannot bring json information to html

Asked

Viewed 51 times

-1

inserir a descrição da imagem aquiI’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.
  • At the beginning I don’t see the error. This question code is main/index.js? You can give an example of this JSON?

  • Yes is main/ index.js and posted the print, using the code "Return <H1>total: {this.state.Pokemons.length}</H1>"

1 answer

2


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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.