CODEWITHSUNDEEP
javascriptreactjs
M Shushant
M Shushant

Reputation: 23

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

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}
             />)
}

Upvotes: 1

Views: 60

Answers (2)

X3R0
X3R0

Reputation: 6334

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}
             />)
}

Upvotes: 2

Anuradha Aggarwal
Anuradha Aggarwal

Reputation: 51

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

Upvotes: 3

Related Questions