CODEWITHSUNDEEP
react-native
wesif
wesif

Reputation: 47

FlatList is not populating with the request

I'm trying to popular a FlatList through a request, however the list is getting empty. I've tried several ways and I can not fill FlatList. Can someone help me?

enter image description here

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

export default class App extends Component{
  constructor(){
super();
this.state = {
  listaTarefas: ''
}
fetch('https://b7web.com.br/todo/25088')
.then((r)=> r.json())
  .then((json)=>{
    let state = this.state;
    state.listaTarefas = json.todo;
    this.setState(state);
  })
}

render() {
return (
  <View>
    <FlatList
      data = {this.state.listaTarefas}
      renderItem = {({item}) => {
        <View>
          <Text>Id: {item.id}</Text>
          <Text>Item: {item.item}</Text>
          <Text>Item: {item.done}</Text>
        </View>
      }}
      keyExtractor = {(item, index) => item.id}
    />
  </View>
);
 }
}

Upvotes: 0

Views: 132

Answers (2)

hong developer
hong developer

Reputation: 13906

You need a small bracket, not a square bracket.

And it is better to separate them so that they are legible.

 _renderItem = ({item}) => (
        <View>
          <Text>Id: {item.id}</Text>
          <Text>Item: {item.item}</Text>
          <Text>Item: {item.done}</Text>
        </View>
  );

...
render() {
return (
  <View>
    <FlatList
      data = {this.state.listaTarefas}
      renderItem={this._renderItem}
      keyExtractor = {(item, index) => item.id}
    />
  </View>
);
 }

Upvotes: 1

spitson
spitson

Reputation: 145

Typo

renderItem = {({item}) => ( // {
  <View>
    <Text>Id: {item.id}</Text>
    <Text>Item: {item.item}</Text>
    <Text>Item: {item.done}</Text>
  </View>
)} // }}

Upvotes: 1

Related Questions