过滤器 function 错误:: 未捕获错误：对象作为 React 子级无效....改用数组

Question

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

Answer 1

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

Answer 2

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