CODEWITHSUNDEEP
reactjs
Kaelix
Kaelix

Reputation: 53

Returning API data with an input search

Learning React and APIs. Data is being returned and populating a table. Now I want to filter that data with an input to search for a specific name. Currently when I type in the input I get back an empty array in the console.

async handleInput(e) {
  e.preventDefault()
  const searchUrl = await axios.get(`https://swapi.dev/api/people/?search=${e}`)
  const characters = []
  for (const characterSearch of searchUrl.data.results) {
    const homeWorldURL = characterSearch.homeworld.replace('http', 'https')
    const homeWorldResponse = await axios.get(homeWorldURL)
    const speciesURL = characterSearch.species
    const speciesResponse = await axios.get(speciesURL)
    characterSearch.homeworld = homeWorldResponse.data.name;
  
    if (!speciesResponse.data.name) {
      characterSearch.species = 'Human'
    } else {
      characterSearch.species = speciesResponse.data.name;
    }

    characters.push(characterSearch)
    this.setState({ characters: characterSearch.data.results })
  }

  console.log(searchUrl.data.results)
}

Upvotes: 0

Views: 181

Answers (1)

buzatto
buzatto

Reputation: 10382

you are passing your whole event to your API request, you should pass its value instead:

const searchUrl = await axios.get(`https://swapi.dev/api/people/?search=${e.target.value}`)

Upvotes: 1

Related Questions