So I tried adding a searchbar that is supposed to update a flatlist, however, I can not make it update. The following code is what I've been trying to do.
const DeviceList: React.FC = () => { const fetcher = url => api.get(url).then(res => res.data); const { navigate } = useNavigation(); const { data, error } = useSWR<Device[]>( // FETCH DATA FROM AN API ); var fullData = data; var initialData = data; const [updatingData, setUpdatingData] = useState(data); const navigateToDevice = useCallback( (deviceId: string, device: Device, deviceName: string) => { navigate('Device', { deviceId, device , deviceName}); }, [navigate], ); const contains = ({name}, query) => { if (name !== undefined){ if (name.includes(query)){ return true } } return false } const [search, setSearch] = useState(""); const updateSearch = (search) => { setSearch(search); setUpdatingData([...filter(fullData, device => { return contains(device, search); })]) }; const navigateToReader = useCallback(() => { navigate('Reader'); }, [navigate]); if (!data) { return (<Container><Text>Loading</Text></Container> ); } return (<Container><SearchBar placeholder="Device Name" defaultValue='' onChangeText={updateSearch} value={search} /><DevicesList data={initialData} extraData={updatingData} keyExtractor={device => device.name} renderItem={({ item: device }) => (<DeviceContainer onPress={() => { navigateToDevice(device.device, device, device.name); }}><DeviceIcon name="truck" size={24} color="black" /><DeviceName>{device.name}</DeviceName></DeviceContainer> )} /><ButtonContainer><Button onPress={() => { navigateToReader(); }}> Scan</Button></ButtonContainer></Container> );};export default DeviceList;
This will show me the list with all the device names when I boot the app up but the search bar will not work. If I set both of data and extraData to updatingData it will not show me anything when I boot the app up, however, the search will work. I have also tried updating the initialData variable inside the updateSearch function, however, it also did not work.
I would like to know how can I make it so that I can have both solutions working together, show the initial data AND have it update whenever I type something on the search bar.