How To Set Fetch Data In To React-Native Table

Question

As I am new to react native I don't know how to do this. I Need To Do, Set My API Data In To My React-Native Table. But I Have No Idea About That.

When I Press The Button I Need To Load My Data In To Table.

I Used react-native-table-component To Create Scroll Table View

export default class TableView2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: [
        'ID',
        'Name',
        'User Name',
        'Gmail',
        'Phone Number',
        'WebSite',
      ],
      widthArr: [40, 60, 80, 100, 120, 140,],
    };
  }

  getData() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(responce => responce.json())
      .then(data => {
        this.setState({tableData: data...});
      });
  }

  render() {
    const state = this.state;
    const tableData = [];
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true}>
          <View>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              <Row
                data={state.tableHead}
                widthArr={state.widthArr}
                style={styles.header}
                textStyle={styles.text}
              />
            </Table>
            <ScrollView style={styles.dataWrapper}>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                {tableData.map((rowData, index) => (
                  <Row
                    key={index}
                    data={rowData}
                    widthArr={state.widthArr}
                    style={[
                      styles.row,
                      index % 2 && {backgroundColor: '#F7F6E7'},
                    ]}
                    textStyle={styles.text}
                  />
                ))}
              </Table>
            </ScrollView>
          </View>
        </ScrollView>
        <Button rounded success onPress={this.getData.bind(this)}>
          <Text>Success</Text>
        </Button>
      </View>
    );
  }
}

Thank You Very Much..!

Answer 1

You can try this :

export default class TableView2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: [
        'ID',
        'Name',
        'User Name',
        'Gmail',
        'Phone Number',
        'WebSite',
      ],
      widthArr: [40, 60, 80, 100, 120, 140,],
      tableData:[]
    };
  }

  getData() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(responce => responce.json())
      .then(data => {
        this.setState({ 
          tableData: data
        });
      });
  }

  render() {
    const state = this.state;
    const { tableData } = state;

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