How to print this API response data in React Native?

Question

I want to print this data on my mobile screen but it shows me nothing when I write the code from this response:

This is my code:

    const [data, setData] = useState('')
      useEffect(() => {
        getData()
    
      }, [])
 const getData = async () => {

    fetch(`${urldemo}blog/${slug}?token=${user_token}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })

      .then((response) => response.json())
      .then((responseJson) => {
        setLoading(false);
        setData([...data, ...responseJson.result]);  
        console.log("log for Exploreblogs =====>", responseJson.result)

      })
      .catch((error) => {
        console.error(error);
      });
  }

This is my return code where I am stuck:

         const renderItem = ({ item }) => {
    
        return (
          <ScrollView style={[styles.footer, {
            backgroundColor: "white"
            // colors.background
          }]}>
    
            <Card style={{ marginHorizontal: 20, }}>
              <Card.Cover style={{ marginVertical: 10, borderRadius: 10, height: 200, }}
                source={require('../../../assets/imagehere.png')} />
    
              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
    
                <Image
                  source={require('../../../assets/news9.png')} />
    
                <Text style={{ textAlign: 'right', color: "orange" }}>
                  {item.short_description}
    
                </Text>
              </View>
              <Text style={{ textAlign: 'center', color: "black", fontSize: 24 }}>
                {item.description}
    
              </Text>
    
              <View style={{
                justifyContent: "space-between",
                flexDirection: "row",
                marginHorizontal: 10
              }}>
                <View style={{ flexDirection: "row" }}>
    
                  <Text style={{ color: "green" }}>4hrs ago</Text>
                  <Text style={{ color: "green" }}> ~ 5 min read</Text>
                </View>
    
                <View style={{ flexDirection: "row" }}>
                  <Image
                    source={require('../../../assets/comment.png')} />
                  <Image style={{ marginHorizontal: 10 }}
                    source={require('../../../assets/shae.png')} />
                  <Image
                    source={require('../../../assets/saved.png')} />
                </View>
              </View>
            </Card>
    
            {/* <Text style={{
              textAlign: 'left', color: "grey", fontSize: 16,
              marginHorizontal: 20, marginVertical: 20
            }}>
             {item.title}
            </Text> */}
    
            <Image style={{ marginHorizontal: 20, width: "90%", borderRadius: 10 }}
              source={require('../../../assets/exnews.png')} />
            <Text style={{ marginHorizontal: 20 }}>{item.description}</Text>
    
    
            <Text style={{
              textAlign: 'left', color: "grey", fontSize: 16,
              marginHorizontal: 20, marginVertical: 20
            }}>
              {item.short_description}
            </Text>
    
    
    
          </ScrollView>
        );
      }
    return (
        <TouchableOpacity >
          {/* <BlogsHeader />
          
          */}
    
          <Animatable.View
    
            animation="zoomIn" >
    
            <View style={{
              flexDirection: 'row',
              flexWrap: 'wrap',
              justifyContent: 'space-between',
              backgroundColor: 'white',
              height: 45,
            }}>
              <TouchableOpacity onPress={() => navigation.navigate('Blogs')}>
                <Image style={{
                  color: 'black',
                  marginTop: 15,
                  tintColor: 'orange'
                }}
                  source={require('../../../assets/backicon.png')}
                />
              </TouchableOpacity>
    
              <Text style={{
                fontSize: 15,
                color: '#FF7F23',
                textAlign: "center",
                marginTop: 15,
              }}
              > Blogs</Text>
    
              <Image style={{ color: 'black', marginTop: 15, alignSelf: 'center', }}
                source={require('../../../assets/avatar.png')}
              />
            </View>
    
            {isLoading ? <ActivityIndicator size="large" color="#FF8025" /> : (
              <FlatList
                style={styles.container}
                data={data}
                renderItem={renderItem}
                keyExtractor={(item, index) => index.toString()}
    
              />
            )
            }
          </Animatable.View>
        </TouchableOpacity>
      )

I have used Flatlist for Item.
I just want to print my response data on my mobile screen but it didn't work for me

I get following error message in the console output:

[TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.]

Answer 1

The problem is with this line:

setData([...data, ...responseJson.result]);  

I'm assuming responseJson.result is an object, in which case this won't work since you can't spread an object into an array, at least in the way you intend.

This should work for you though:

const [data, setData] = useState({}) // Use object instead

// Other stuff

setData({...data, ...responseJson.result}); // Spread to object instead.

Alternatively, consider checking out these solutions e.g. for...of or Object.keys()/entries()/....

Otherwise, you would need to post the value responseJson.result for more troubleshooting.