kcNeko kcNeko - 9 days ago 9
Javascript Question

Reactjs with Pokeapi

I'm new to reactJS and I have an app that searches the name of the pokemon reads the data eg. name, height, weight. Now when it comes to the abilities I can't get the value of the name of the ability.

here's my app.js



import React, { Component } from 'react';
import './App.css';
import Request from 'superagent';

class App extends Component {
constructor(props) {
super(props);
this.state = {
body: "",
value: "",
name: "",
abilities: "",
order: "",
weight: "",
height: ""
};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
this.setState({value: event.target.value.toLowerCase()});
}

handleSubmit(event) {
var url = "https://pokeapi.co/api/v2/pokemon/"+this.state.value;
Request.get(url).then((response) => {
this.setState({
body: response.body,
height: response.body.height,
weight: response.body.weight,
abilities: response.body.abilities,
name: response.body.name,
order: response.body.order,
picFront: response.body.sprites.front_default,
picBack: response.body.sprites.back_default,
picShiny: response.body.sprites.front_shiny,


});
});
event.preventDefault();
}

render() {

return (
<div className="flex">
<div className="App">
<h1>Search Pokemon</h1>
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
</div>
<div className="app2">
<h1><small>{this.state.order} </small>{this.state.name}</h1>
<img alt={this.state.name} src={this.state.picFront}/>
<img alt={this.state.name} src={this.state.picBack}/>
<img alt={this.state.name} src={this.state.picShiny}/>
<p>Height: {this.state.height}</p>
<p>Weight: {this.state.weight}</p>
<p>list of abilities here</p>
</div>
</div>

);
}
};


export default App;





Thank you in advance.

Answer

Abilities has this structure. You can check this by logging this.state.abilities

abilities: [
  {
    slot: 3,
    is_hidden: true,
    ability: {
      url: "https://pokeapi.co/api/v2/ability/31/",
      name: "lightning-rod"
    }
  },
  {
    slot: 1,
    is_hidden: false,
    ability: {
      url: "https://pokeapi.co/api/v2/ability/9/",
      name: "static"
    }
  }
]

It's just an array. What you need to do is iterate over this array to retrieve those name values. There are a lot of ways to do this but the general logic should be something like:

"For each of these objects in the abilities array, I need to retrieve ability.name"

I am going to post some code here but try to solve it yourself before looking at mine.

In your p tag, you can do this

    <p>
      list of abilities here: 
      {this.state.abilities && this.state.abilities.map((abilityObject) => 
        abilityObject.ability.name).join(', ')}
    </p>
Comments