i am using socket.io or getting live crypto prices . it gives new prices each 10second. i have applied search functionality to get live price. but on every 10 sec my serach function get reverted and go back to normal state .
my code is below
const Item = ({ name }) => {
return (
<View style={styles.item}>
<Text>{name}</Text>
</View>
);
};
const renderItem = ({ item }) => <Item name={item.name} />;
const App = () => {
// this.arrayholder = DATA;
const [loading, setloading] = useState(false);
const [data, setdata] = useState("");
const [dasta, setdsata] = useState(DATA);
const [error, seterror] = useState(null)
const [searchValue, setsearchValue] = useState("")
useEffect(() => {
// setLoading(true);
var yui = socket.on("chat", (data) => {
setdata(data)
});
// console.log(yui.data)
}, []);
searchFunction = (text) => {
const updatedData = data.filter((item) => {
const item_data = `${item.name.toUpperCase()})`;
const text_data = text.toUpperCase();
return item_data.indexOf(text_data) > -1;
});
setdata(updatedData)
setsearchValue(text)
};
return (
<View style={styles.container}>
<SearchBar
placeholder="Search Here..."
lightTheme
round
value={searchValue}
onChangeText={(text) => searchFunction(text)}
autoCorrect={false}
/>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>
);
}
can u help pls . like when i search bitcoin it shows me bitcoin but after 10 seconds and it shows all the coin name . you can also see here promblem
To maintain a current search state persistent although new coins are added to the list you should call the searchFunction with the searchValue Like
searchFunction(searchValue)
after getting the latest coin list As previous value is saved in searchValue it will filter again your list Form mine understanding without testing your code I assume you are getting you new data in useEffect
var yui = socket.on("chat", (data) => {
setdata(data);
});
So here call
searchFunction(searchValue)
After
setdata(data);
Or Simply replace your useEffect with
useEffect(() => {
// setLoading(true);
var yui = socket.on("chat", (data) => {
setdata(data);
searchFunction(searchValue);
});
// console.log(yui.data)
}, []);