How to display json data on ListView react native by post request api

Question

Here I am trying to fetch data from API post method and trying to populate on listview , and after selecting particular data I'll go to net page. By get method I have done that. But when I am running this code blank list is coming . How can I parse value from groupData.name? After getting data on list I can select particular data and send to other screen ,but for now , how can I populate data in list?

    import React, { Component } from 'react';
    import { View, Text, TextInput,   
    FooterTab,Button,TouchableOpacity, ScrollView,ListView, StyleSheet,
     ActivityIndicator ,Header,icon} from 'react-native';

    import { createStackNavigator } from 'react-navigation';  
    import { SearchBar } from 'react-native-elements';


    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

   class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }

  componentDidMount() {
    this.createViewGroup();
  }

  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http:///Dsenze/userapi/grouphier/viewgroup',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );

      const responseJson = await response.json();

      const { groupData } = responseJson;

      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };

  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
      <Text style={styles.text}>Hospital name {name}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList
              data={data}
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}   
    class ClickedItem extends Component
    {

        constructor() {
            super();
            this.state = {
              inputValue: '',
              // Default Value of the TextInput
              // Default value for the QR Code
            };
          }

        static navigationOptions = 
        {
            title: "Selected Item",
            header:  null
        };

        render()
        {

            return(
                <ScrollView>
                <View style = { styles.container2 }>

        <TextInput style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Hospital Id"
          editable={false}
          placeholderTextColor="#000000"
          onChangeText={(hospital_id) => this.setState({hospital_id})}>{ this.props.navigation.state.params.item.id }</TextInput>

       <TextInput   style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Field 2"
          secureTextEntry={false}
          placeholderTextColor="#000000"
          onChangeText={(Field2) => this.setState({Field2})}/>

    <TouchableOpacity style={styles.button}onPress={() => {Insert(this.state.hospital_id,this.state.Field2,this.state.Field3,this.state.Field4,this.state.Field5,this.state.Field6);{this.getTextInputValue}}}>
              <Text style={styles.buttonText}>Insert</Text>
          </TouchableOpacity>
                </View>
                </ScrollView>
            );
        }
    }
    export default InvDemoPost = createStackNavigator(
    {
        List: { screen: RenderList,
                 header: true},

        Item: { screen: ClickedItem,
                header: null }
    });


    const styles = StyleSheet.create(
    {
        container1:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },

        container2:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            paddingHorizontal: 15
        },

        inputBox:{
            width:300,
            borderColor: '#48BBEC',
            backgroundColor: '#F8F8FF',
            borderRadius:25,
            paddingHorizontal:16,
            fontSize:16,
            color:'#000000',
            marginVertical:10, 

        },
        button:{
            width:300,
            backgroundColor:'#4169E1',
            borderRadius:25,
            marginVertical:10,
            paddingVertical:16
        },

        buttonText:{
        fontSize:16,
        fontWeight:'500',
        color:'#ffffff',
        textAlign:'center'

        },

        item:
        {
            padding: 15
        },

        text:
        {
            fontSize: 18
        },

        separator:
        {
            height: 2,
            backgroundColor: 'rgba(0,0,0,0.5)'
        }
    });

Below is the Json data ,that I have to populate on the list view

{
      "groupData": [{
        "hierarchy": 4,
        "id": 4,
        "name": "St.Mary's Hospitals",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 5,
        "name": "Mandya Clinic",
        "parent": 6,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 7,
        "name": "Blr Clinic",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 8,
        "name": "kings hospital",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 9,
        "name": "jason hospital",
        "parent": 3,
        "type": 1
      }],
      "success": "true"
    }

Answer 1

I am using the following output:

{
      "groupData": [{
        "hierarchy": 4,
        "id": 4,
        "name": "St.Mary's Hospitals",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 5,
        "name": "Mandya Clinic",
        "parent": 6,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 7,
        "name": "Blr Clinic",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 8,
        "name": "kings hospital",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 9,
        "name": "jason hospital",
        "parent": 3,
        "type": 1
      }],
      "success": "true"
    }

Assuming this object is assigned to this.state.dataSource

<FlatList
  data={this.state.dataSource.groupData}
  renderItem={({item: { name }) => <Text>{name}</Text>}
  keyExtractor={({id}) => id.toString()}
/>

But, you must remember that you're fetching data in componentDidMount, which is called after the first render. This means that this.state.dataSource will be empty until your API call has succeeded.

You could add an additional state variable isLoading. Then inside your render function you could have some logic to render a Spinner or a List, depending on the status of your API call.

render() {
  const { isLoading, dataSource: { groupData } } = this.state;
  if(isLoading) {
    return <Text>Loading</Text>
  }
  return (
    <FlatList
      data={groupData}
      renderItem={({item: { name }) => <Text>{name}</Text>}
      keyExtractor={({id}) => id.toString()}
    />
  )
}

Then inside of the logic of your API call, where you set dataSource, you can then set isLoading to false.

Updated to reflect code in question

class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }

  componentDidMount() {
    this.createViewGroup();
  }

  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http:///Dsenze/userapi/grouphier/viewgroup',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );

      const responseJson = await response.json();

      const { groupData } = responseJson;

      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };

  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
      <Text style={styles.text}>Hospital name {name}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList
              data={data}
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}