how do I Output this api's code into a flatlist am encountering an error when I output the code

Issue

This is the error am encountering when I output the code, the only way I can view any output is if I use Object.keys() and the output should include all the information under the "Time Series (5min)" object: Objects are not valid as a React child (found: object with keys {1. open, 2. high, 3. low, 4. close, 5. volume}). If you meant to render a collection of children, use an array instead.

const Rename = () => {
    const[listing, setListing] = useState([]);
    const[isLoading, setIsLoading]= useState(true);
    const[error,setError] = useState(null);
  
     useEffect(() =>{
      getProduct();
     }, []);
  
    const getProduct = () =>{
      const url = 'https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=IBM&interval=5min&apikey=demo'
        fetch(url)
        .then((response) => {
          console.log('calling data')
          if(!response.ok){
            throw new Error('something is wrong')
          }
            return response.json();
        }).then((data) =>{
          setListing(Object.values(data['Time Series (5min)']));
          setIsLoading(false)
          console.log( Object.values(data['Time Series (5min)']));
        }).catch((error) =>{
          setError(error.message);
          setIsLoading(false);
          console.log(error)
        })
    }
  
       return (
        <View>
          {isLoading ? (
            <ActivityIndicator color={'#fff'} size='large'/>
          ): error ? <Text>{error}</Text>: (
        <View>
          
       
            <FlatList
              data={listing}
              renderItem={({item, index}) => 
                <TouchableOpacity onPress={() => {}}>
                  <Text style={styles.output}>{item}</Text>
                </TouchableOpacity>
              }
              keyExtractor={item => item.id}
            />
             </View>
          )}
        </View>
       )
  }  

this is the code

Solution

It appears from the issue youre seeing that youre attempting to render an object directly within your React component, which is prohibited. It appears that you are attempting to render an object with keys {1. open, 2. high, 3. low, 4. close, 5. volume} for each item in your listing array.

You must edit your FlatLists rendering section to retrieve the values you wish to display from each object in order to resolve this problem. You can display key-value pairs by iterating over the keys if you wish to show all of the data under the Time Series (5-minute) object.

<FlatList
  data={listing}
  renderItem={({ item, index }) => (
    <TouchableOpacity onPress={() => {}}>
      {Object.entries(item).map(([key, value]) => (
        <Text key={key} style={styles.output}>
          {`${key}: ${value}`}
        </Text>
      ))}
    </TouchableOpacity>
  )}
  keyExtractor={(item, index) => index.toString()} 
/>

Answered By - Pratik Prakash Bindage