filter function error :: Uncaught Error: Objects are not valid as a React child .... use an array instead

Viewed 24

Trying to display results after applying filter function.I need to compare with searchValue.but it gives Error

{noteList.filter((obj,index) => <Card 
                noteObj={obj.Name.toLowerCase().includes(searchValue)} 
                index={index} 
                deleteNote={deleteNote}
                updateNoteArray={updateNoteArray}
             />)
} 
2 Answers

You need to first filter out the options from noteList array according to your condition and then apply a map over it.

{
noteList.filter((obj) => obj.Name.toLowerCase().includes(searchValue))
        .map((item,index) => <Card 
                noteObj={item} 
                index={index} 
                deleteNote={deleteNote}
                updateNoteArray={updateNoteArray}
             />
 )
}

noteList.filter((obj)=>obj.Name.toLowerCase().includes(searchValue)) This will return a new array which contains all the names which will includes searchValue. Then you can use this resultant array to display your result

use map not filter

{ noteList
.filter((obj, index)=>{ return obj.Name.toLowerCase().includes(searchValue)})
.map((obj,index) => <Card 
                noteObj={obj} 
                index={index} 
                deleteNote={deleteNote}
                updateNoteArray={updateNoteArray}
             />)
}
Related