How to display dynamic array of object in table under react native app?

Question

I'm building a react native app, moving from home screen to setting screen.
I need to load a dynamic array in table format.
Right now i m using compoundDidMount() function to fetch data from an api.
Everything is fine but i don't know how to render the output array i got from compoundDidMount() function.

import React from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Button,
  ImageBackground,
  Dimensions,
  ActivityIndicator,
  Alert,
  ScrollView
} from 'react-native';

import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

import { createAppContainer} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import FormData from 'FormData';
import styles from "../css/styles";

export default class SettingsScreen extends React.Component {


   constructor(props) {
      super(props);
      this.state = {
        tableHead: ['Head', 'Head2', 'Head3'],
        widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200]
      }
    }
    componentDidMount(){


      return fetch('http://45.33.123.173:3000/query/get-history/Org2MSP.'+this.props.navigation.state.params.id)
      .then((response)=> response.json())
      .then((responseJson)=>{
        console.log('meet history',JSON.stringify(responseJson));
        console.log('meet history',responseJson[0]);
        console.log('meet history',responseJson.length);


      })

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

    render() {

      const state = this.state;
      const tableData = [];
      for (let i = 0; i < state.myArray.length; i += 1) {
         state.myArray[i].username
        const rowData = [];
        for (let j = 0; j < 9; j += 1) {
          rowData.push(`${state.myArray[i].username}${state.myArray[i].balance}`);
        }
        tableData.push(rowData);
      }

      return (
        <View style={styles1.container}>
          <ScrollView horizontal={true}>
            <View>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                <Row data={state.tableHead} widthArr={state.widthArr} style={styles1.header} textStyle={styles.text}/>
              </Table>
              <ScrollView style={styles1.dataWrapper}>
                <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                  {
                    tableData.map((rowData, index) => (
                      <Row
                        key={index}
                        data={rowData}
                        widthArr={state.widthArr}
                        style={[styles1.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                        textStyle={styles1.text}
                      />
                    ))
                  }
                </Table>
              </ScrollView>
            </View>
          </ScrollView>
        </View>
      )
    }
  }

  const styles1 = StyleSheet.create({
    container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
    header: { height: 50, backgroundColor: '#537791' },
    text: { textAlign: 'center', fontWeight: '100' },
    dataWrapper: { marginTop: -1 },
    row: { height: 40, backgroundColor: '#E7E6E1' }
  });



  SettingsScreen.navigationOptions={  
    tabBarIcon:({tintColor, focused})=>(  
        <Icon  
            name={focused ? 'ios-settings' : 'md-settings'}  
            color={tintColor}  
            size={25}  
        />  
    )  
}

Avinash Kumar · Accepted Answer · 2020-02-15 09:22:44Z

So as you said you are getting data in fetch but not in table. Because you have not saved data in state as you will need in table.

I am pasting same code you have written with some modifications.

import React, {Component} from 'react';
import { StyleSheet, View, ScrollView} from 'react-native';
import { Table, Row} from 'react-native-table-component';

class SettingsScreen  extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [],
      tableHead: ['ID', 'Name', 'Number'],
      widthArr: [40, 100, 80, 100, 120, 140, 160, 180, 200]
    }
  }

  componentDidMount(){
    fetch('https://5df47c4bf9e7ae0014801983.mockapi.io/tabletest')
        .then(response=>response.json())
        .then(myArray=>{
          this.setState({myArray})
        })
  }

  render() {
    const tableData = this.state.myArray.map(record=>([record.id, record.name, record.mobile]));
        return (
        <View style={styles1.container}>
          <ScrollView horizontal={true}>
            <View>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                <Row data={this.state.tableHead} widthArr={this.state.widthArr} style={styles1.header} textStyle={styles1.text}/>
              </Table>
              <ScrollView style={styles1.dataWrapper}>
                <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                  {
                    tableData.map((rowData, index) => (
                        <Row
                            key={index}
                            data={rowData}
                            widthArr={this.state.widthArr}
                            style={[styles1.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                            textStyle={styles1.text}
                        />
                    ))
                  }
                </Table>
              </ScrollView>
            </View>
          </ScrollView>
        </View>
    )
  }
}

const styles1 = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  header: { height: 50, backgroundColor: '#537791' },
  text: { textAlign: 'center', fontWeight: '100' },
  dataWrapper: { marginTop: -1 },
  row: { height: 40, backgroundColor: '#E7E6E1' }
});

export default SettingsScreen ;

Output:

Collectives™ on Stack Overflow

How to display dynamic array of object in table under react native app?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related