How should I display single-data-object fetched by API in react-native?-CodePudding

I am learning React-Native and trying to display user profile on profile screen.

Displaying a list of objects obtained from the server is pretty straightforward, but I am confused on how do I display a single-object that my API-call fetches.

This is my fetched object data output which I get when I do console.log(getProfileApi.data) right before displaying it.

Object {
  "email": "[email protected]",
  "first_name": "User",
  "gender": "Male",
  "id": 2,
  "last_name": "1",
  "profile": Object {
    "address": null,
    "city": null,
    "country": null,
    "dob": "2021-11-01",
    "profile_pic": "http://192.168.0.218:8000/media/profile/user1_profile.jpg",
    "title": null,
    "zip": null,
  },
  "user_type": "Owner",
}

This is how I am trying to display the fetched data, but the data is not displayed.

<FlatList
  // getProfileApi contains the response from server which is shown above
  data={getProfileApi.data}
  renderItem={({ item }) => (
    <Text>{item.email}</Text>
  )}
/>

How do I extract the data and display it. Is there any other component to use instead of Flat-List to display a single-object data?

CodePudding user response：

First of all, FlatList is used to display the data of the array. It is usually used to display big lists, like products list in an e-commerce app, users lists, posts, etc. To display simple data as you have, you can use ScrollView. Follow the below approach to display your data in ScrollView.

import React, { useCallback, useEffect, useState } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';

const YourScreenName = () => {
  // declare state variable to handle loading UI
  // set initial value to true, so when screen load initially it display loading
  const [isLoading, setLoading] = useState(true); 
  const [user, setUser] = useState(null);

  useEffect(() => {
    getData();
  }, []);

  const getData = useCallback(() => {
    setLoading(true); // Start the loader, So when you start fetching data, you can display loading UI
    getProfileApi().then((data) => {
      setUser(data);
      setLoading(false);
    }).catch((error) => {
      // display error
      setLoading(false); // stop the loader
    })

    // or your any data fetching query
    // setUser(getProfileApi.data);
    // setLoading(false);
  }, []);

  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.contentContainer}
    >
      {
        isLoading && (
          <Text>Loading</Text> 
        );
      }
      {
        !isLoading && user && (
          <View>
            <Text>Email : {user.email}</Text>
            <Text>Name : {user.name}</Text>
          </View>
        )
      }
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default YourScreenName;

CodePudding user response：

Instead of using a flat list you can directly render the UI component and make it's content dynamic just like below

<Text>{getProfileApi.data.email}</Text>

there is no need for a flat list here because it is used to render a list of data but for a single data set, you can directly use it in your UI.

CodePudding user response：

First create a state like this

const [myArray, setMyArray] = useState([]);

then you have to set your array in the state after you have fetched the data from your api instead of directly calling getProfileApi which looks like a function

setMyArray(yourresponsearray);

then inside your Flatlist component you can pass that state inside the data prop

<FlatList
  data={myArray}
  renderItem={({ item }) => (
    <Text>{item.email}</Text>
  )}
/>