I'm trying to apply a filter in one array of objects with the property Id to get the list of items that starts with the text from an input.
I have only two elements in the array but if I ever get the same two elements (render as a list).
What i need to do for fix the filter logic in function SearchFilter?
import React, { useEffect, useState } from "react"
import {useSelector} from 'react-redux'
import {View, Item, Text, Icon, Input, List, ListItem, Left, Thumbnail, Spinner} from 'native-base'
const SearchModal =(props:any)=>{
const sessionsCata = useSelector((state)=> state.sessionsCata.sessions)
const [itemsFiltered, setItemsFiltered] = useState([])
const [showSpinner, setShowSpinner] =useState(false)
//filter the array objects
async function SearchFilter(params:string) {
setShowSpinner(true)
if(sessionsCata && sessionsCata.length>0){
let result = await sessionsCata.filter(async x=> x.Id.startsWith(params) )
if(result)
setItemsFiltered(result)
}
await Sleep(500) //function with Promise-setTimeout
setShowSpinner(false)
}
return(
<View style={StylesSearch.containerBar} >
<Item rounded style={StylesSearch.searchBar}>
<Input placeholder='Id...' onChangeText={async (text) => await SearchFilter(text)} />
</Item>
</View>
<View>
{ showSpinner ? <Spinner color='grey'/> :
itemsFiltered && itemsFiltered.length>0 ? (
<List>
{
itemsFiltered.map(item=>(
<ListItem avatar key={item.id}>
<Body>
<Text>{item.id}</Text>
</Body>
</ListItem>
))
}
</List>
): <Text>Not items filtered...</Text>
}
</View>
)
}
You don't need to use async/await on the filter. It's not async. Also, since itemsFiltered is deterministic (based on sessionsCata state), it shouldn't be its own state.
const [prefix, setPrefix] = useState("");
const itemsFiltered = sessionsCata.filter(x => x.Id.startsWith(prefix));
// Then
<Input onChangeText={setPrefix} />
Change :
if(sessionsCata && sessionsCata.length>0){
let result = await sessionsCata.filter(async x=> x.Id.startsWith(params) )
if(result)
{
if(JSON.stringify(itemsFiltered).includes(JSON.stringify(result)))
return;
setItemsFiltered(result)
}
}
Finally i get it. The error was the property Id -> id.
And i quit async from the filter, put validation in params.
async function SearchFilter(params:string) {
setShowSpinner(true)
await Sleep(500)
setShowSpinner(false)
if(sessionsCata && sessionsCata.length>0 && params.length>0){
let result = sessionsCata.filter( x=> x.id.startsWith(params) )
if(result)
setItemsFiltered(result)
}
}
Change input:
<Input placeholder='Id...' onChangeText={ (text) => SearchFilter(text)} />