Parse JSON array response to FlatList in React Native

Question

I'm willing to parse the above JSON response to a FlatList, but I can't figure what I'm missing. Since it does not have a key and value pair, I'm not sure how to render it.

{"list":["a","b","c","d"]}

My code is...

import React from 'react';
import { View, FlatList, Text } from 'react-native';

export default class Home extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { dataSource: [] };
  }

  async componentDidMount() {
    const response = await fetch('http://.../');
    const responseJson = await response.json();
    this.setState({ dataSource: responseJson.list });
  }

  render() {
    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({ item, index }) => <Text>{item[index]}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

I can see a typo here this.setState({ dataSource: responseJson.lista }); you don't have any property named lista in your json — Code Maniac
– Code Maniac, Commented Feb 22, 2019 at 2:11
Also You don't need to index here renderItem={({ item, index }) => <Text>{item[index]}</Text>} facebook.github.io/react-native/docs/flatlist — Code Maniac
– Code Maniac, Commented Feb 22, 2019 at 2:18

Isaac · Accepted Answer · 2019-02-22 02:13:43Z

2

Your problem is because you're doing the below

renderItem={({ item, index }) => <Text>{item[index]]}</Text>}

item is referring to a,b,c,d but you're doing a[index],b[index] which clearly wrong

Solutions:

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

You don't need index for your renderItem because the item is already a,b,c,d respectively

answered Feb 22, 2019 at 2:13

Isaac

13k18 gold badges66 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arthur Ávila Over a year ago

I'll try it so!

Vu Luu Over a year ago

@issac I also think this is your problem. In addition, you could read this article to examine some examples medium.com/react-native-development/…

Isaac Over a year ago

@vuluu: Sorry I don't follow you

Arthur Ávila Over a year ago

Thank you for the help!

Isaac Over a year ago

@ArthurÁvila: Do mark it as answer if it helps to fix your problem as a reference for future reader stumbled on same issue. Glad to help thanks

Alen.Toma · Accepted Answer · 2019-02-22 02:27:50Z

You dont need item index, try the below code and let me know.

import React from 'react';
import { View, FlatList, Text } from 'react-native';

export default class Home extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { dataSource: [] };
  }

  async componentDidMount() {
    const response = await fetch('http://.../');
    const responseJson = await response.json();
    this.setState({ dataSource: responseJson.list });
  }

  render() {
    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item}</Text>}
          keyExtractor={this.state.dataSource.indexOf(item)}
        />
      </View>
    );
  }
}

Collectives™ on Stack Overflow

Parse JSON array response to FlatList in React Native

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related