so I am trying to make a filter search. I am calling the function using
<h2>Numbers</h2>
{
persons.map((persons) => <Persons persons={persons} setFilter= {setFilter} key={persons.id} />)
}
</div>
so I created an array using map however when I pass it through
const Persons = ({ persons, setFilter }) => {
const checkPersonsName = setFilter === '' ?
persons
:
persons.filter((person) => person.name.toLowerCase().includes(setFilter) )
return (<li>{checkPersonsName.name} {checkPersonsName.number}</li>)
}
it gives me an error saying:
Uncaught TypeError: persons.filter is not a function.
I did a console.log and persons should be an array. so I am not quite sure what to do here and why I am getting this error.
As far as I concern, you are using persons two times unnecessarily. You first map throught the array persons and then use the same persons as a prop of the component Persons.
I think that it'd be better if you use Persons as a function, not as a React component, and insert your map and li rendering after the filter. Check my codesandbox here