How make work a search filter in react for node array

Question

Hi guys i make a search filter in react for an array i get via my node server, but i got this error: × TypeError: props.filteredCharacters.map is not a function in components/CharacterList/index.js:6

Here the 2 files:

import React, { useEffect, useState } from 'react'
import SearchBox from '../SearchBox'
import CharacterList from '../CharacterList'



const SearchDisney = () => {

  const [inputs, setInputs] = useState('');
  const [btn, setBtn] = useState(false);
  const [apiResponse, setApiResponse] = useState([]);
  const [searchCharacter, setSearchCharacter] = useState('');

  useEffect(() => {

    callAPI();

    if (inputs.length > 2) {
      setBtn(true)
    } else if (btn) {
      setBtn(false)
    }

  }, [inputs, btn])

  const callAPI = () => {
    fetch("http://localhost:9000/disneyCharacter")
      .then(res => res.json())
      .then(res => setApiResponse(res))
  }

  const handleInput = (e) => {
    setSearchCharacter(e.target.value)
  }

  const filteredCharacters = () => {
      apiResponse.filter((character) => {
       return character.name.toLowerCase().includes(searchCharacter.toLowerCase())
    })
  }

  return (

    <div className="search-container">
      <h1>Personnage Infos</h1>
        <SearchBox handleInput={handleInput} />
        <CharacterList filteredCharacters={filteredCharacters} />
    </div>
  )
}


export default React.memo(SearchDisney)

And the CharacterList:

import React from 'react'
import Character from '../Character'

const CharacterList =  (props) => {

  const characters = props.filteredCharacters.map((character, id) => {
    return <Character key={id} name={character.name} username={character.username} yearCreation={character.yearCreation}/>
  })

  return (
    <div>
        { characters }
    </div>
  )
}

export default CharacterList

i can display the array in the first file but now i want to make search filter and got this error, any advice to get ride of this error?

itaydafna · Accepted Answer · 2020-04-29 20:36:14Z

1

Looks like there are 2 things you need to fix here:

on the SearchDisney component, you are not returning anything from the filteredCharacters function. Here is the fix:

  const filteredCharacters = () => {
     //need to return this 
     return apiResponse.filter((character) => {
       return character.name.toLowerCase().includes(searchCharacter.toLowerCase())
    })
  }

Addtionally, in order for CharacterList to recieve the filteredCharacters prop as an array - you have to call the filteredCharacters function which returns this array, for example, like this:

 <div className="search-container">
      <h1>Personnage Infos</h1>
        <SearchBox handleInput={handleInput} />
        //call the function here:
        <CharacterList filteredCharacters={filteredCharacters()} />
    </div>

answered Apr 29, 2020 at 20:36

itaydafna

2,0861 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How make work a search filter in react for node array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related