Non of the Above mentioned answers worked for me.Infact When I was fetching the api it was done correctly like
fetch('https://reactnative.dev/movies.json')
.then((response) => response.json())
.then((json) => {
console.log(json.movies);
})
.catch((error) => {
console.error(error);
});
but the problem was that when I tried to add the one more string in fetch i got an error like this was the code
const fetchCities = (text) => {
setCity(text)
fetch('https://reactnative.dev/movies.json'+text)
.then((response) => response.json())
.then((json) => {
console.log(json.movies);
})
.catch((error) => {
console.error(error);
});
}
Actually I wanted to make a searchable component so I added the following chracters to remove the error so that it can combine a string to filter the data as it is searched.
?query=
in fetch statement like this
const fetchCities = (text) => {
setCity(text)
fetch('https://reactnative.dev/movies.json?query=')
.then((response) => response.json())
.then((json) => {
console.log(json.movies);
})
.catch((error) => {
console.error(error);
});
}
The complete code that will show the filtering effect on console as you will search for a value is given below
import { text } from '@fortawesome/fontawesome-svg-core';
import React, { Component, Fragment, useState, useEffect } from 'react';
import { FlatList,SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Button, Image, TextInput } from 'react-native';
import BRAND_DRUG_UNIQUE from '../BRAND_DRUG_UNIQUE.json';
const Search = () => {
const [city, setCity] = useState("")
const [cities, setCities] = useState([])
const fetchCities = (text) => {
setCity(text)
fetch('https://reactnative.dev/movies.json?query='+text)
.then((response) => response.json())
.then((json) => {
console.log(json.movies);
})
.catch((error) => {
console.error(error);
});
}
useEffect(()=>{
// console.log("filteredData==> ",city);
})
return (
<View style={{
position: "relative", zIndex: 1000, borderWidth: 1, borderColor: "grey", shadowColor: "#000", marginBottom: 10,
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.58,
shadowRadius: 16.00,
elevation: 24,
}}>
<View>
<Text>
It is the search component
</Text>
<TextInput
placeholder="Search here if you want"
style={{ color: "#00aaff" }}
value={city}
onChangeText={(text) => fetchCities(text)}
/>
</View>
</View>
);
}
export default Search;
Hope it helped.Thanks.
response.text()to see the response text.