Banner Banner - 1 month ago 10
React JSX Question

React - Can't call function in api file for pokedex app

i'm building a pokedex (pokemon index) using an api called pokeapi. I decided to use this wrapper to make things a little easier: https://github.com/PokeAPI/pokedex-promise-v2

I have a input field and when the submit button is clicked, I want the api to return the pokemon if there is a match.

Searchbar.js:

onClick() {
var text = this.state.text;

PokeApi.getPokemon(text).then(function(data) {
console.log(data);
}.bind(this));

}


api.js:

import React, { Component } from 'react';
import Pokedex from 'pokedex-promise-v2';

var P = new Pokedex();

var PokeApi = {

getPokemon: function(query) {
P.getPokemonByName(query)
.then(function(response) {
return response;
})
.catch(function(error) {
console.log('There was an ERROR: ', error);
});
}
}

export default Component


Now when I click on submit, I get the following in console:

Uncaught TypeError: _api2.default.getPokemon is not a function

I can't seem to figure out what '_api2.default' is or how to get pass this issue. If anyone could provide some assistance it would be greatly appreciated, thanks!

Answer

Your code sample doesn't appear to be complete but you probably need to export the PokeApi object and import it where you plan to use it.

(Perhaps you intended to export PokeApi from api.js rather than re-exporting React.Component?)