React Search Input Pokemon [closed]

I want to implement a search bar that will filter out a list of Pokémon whenever a user types into it. I have looked through other solutions but I am still getting confused. Here is my code:

import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import Loading from "../layout/Loading";
import axios from "axios";

export default class PokemonList extends Component {
  state = {
    url: "",
    pokemon: null,
    pokeTemp: null,
    searchValue: "",

  //information about pokemon
  async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokemon:["results"] });
    this.setState({ pokeTemp:["results"] });

  //user search for pokemon
  handleInputChange = (event) => {
    const value =;
    this.setState({ searchValue: value });

  filterPokemon = (userSearch) => {
    const allPokemon = [...this.state.pokeTemp];
      pokemon: allPokemon.filter((pokemon) =>

  render() {
    return (
        {this.state.pokemon ? (
          <div className="row">
            { => (
        ) : (
          <Loading />

I have an idea that as soon as the user types in a value, it will update the value, then we also use that value to filter the data, then map that filter later in the div but I am having some trouble implementing this.

Can anyone explain what I am doing wrong? Any help or explanation will be helpful, thank you!


Your code actually works just fine, it’s just that you forgot to call filterPokemon() in handleInputChange.