Skip to content

Reactjs with Pokeapi

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) {
    this.state = {
      body: "",
      value: "",
      name: "",
      abilities: "",
      order: "",
      weight: "",
      height: ""

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

  handleChange(event) {

  handleSubmit(event) {
    var url = ""+this.state.value;
    Request.get(url).then((response) => {
        body: response.body,
        height: response.body.height,
        weight: response.body.weight,
        abilities: response.body.abilities,
        order: response.body.order,
        picFront: response.body.sprites.front_default,
        picBack: response.body.sprites.back_default,
        picShiny: response.body.sprites.front_shiny,


  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" />
        <div className="app2">
          <h1><small>{this.state.order} </small>{}</h1>
          <img alt={} src={this.state.picFront}/>
          <img alt={} src={this.state.picBack}/>
          <img alt={} src={this.state.picShiny}/>
          <p>Height: {this.state.height}</p>
          <p>Weight: {this.state.weight}</p>
          <p>list of abilities here</p>


export default App;


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

abilities: [
    slot: 3,
    is_hidden: true,
    ability: {
      url: "",
      name: "lightning-rod"
    slot: 1,
    is_hidden: false,
    ability: {
      url: "",
      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”

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

      list of abilities here: 
      {this.state.abilities && =>', ')}