CODEWITHSUNDEEP
javascriptreact-native
lilRed
lilRed

Reputation: 55

how i return object list using flatlist?

i am new to learn react-native, i am trying to fetch an API, that API will return objects list.

i set use state look like below

const [DATA, setDATA] = useState([])

i gonna fetch an API and get the data from the server and put them into data property.

const discountdetail = ()=> {
    fetch(`https://example/discount` ,{
      method: "GET",
      headers: {Authorization: localStorage.getItem('tokenType')+ ' ' +localStorage.getItem('token')}})
      .then(res=>res.json())
      .then(res=>{
          setDATA(res)
          console.log(item)
        })
      })
    }
    
return(


      .....
      .....

      <FlatList
        data={DATA}
        renderItem={({item})=>{
          <View style={styles.item}>
            <Text style={styles.title}>{item.name}</Text>
          </View>
        }}
        keyExtractor={(item, index) => index.toString()}        
        // extraData={selectedId}
        style={{marginVertical: 25,}}
      />  
)

[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]

it goes into an endless loop. it seems like that I need to use the async method, but I am struggle to implement it. please give me a hint to fix it.

Upvotes: 0

Views: 156

Answers (1)

hakki
hakki

Reputation: 6517

you need to add object in every map iteration to your DATA array. So you can use spread operator or unshift(). I prefered spread operator for this example.

const discountdetail = ()=> {
    fetch(`https://example/discount` ,{
      method: "GET",
      headers: {Authorization: localStorage.getItem('tokenType')+ ' ' +localStorage.getItem('token')}})
      .then(res=>res.json())
      .then(res=>{
        res.map(function(item){
          setDATA([{name: item.name,value: item.value,}, ...DATA])
          console.log(item)
        })
      })
      console.log("data after map:" ,DATA);

    }

Upvotes: 1

Related Questions