React Native Flatlist nested loop

Question

I get this data as a response

[
  {
    "breakfast": [
      "3x Eggs",
      "2x Bread",
      "Cup of Milk",
    ],
    "lunch": [
      "1/4 Chicken breast",
    ],
    "dinner": [
      "1x Apple",
    ],
    "snack": [],
    "_id": "5dd5224d76cf581424e1bb84",
  },
]

I want to display them like this

here is my code

async componentDidMount(){
  const breakfast = [];
  const headers = {
    'Authorization': GLOBAL.jwt
  };
  await axios({
    method: 'GET',
    url: 'http://192.168.1.101:4040/users/dietData',
    headers: headers,
  }).then((response) => {
    response.data.forEach(item => {
      breakfast.push(item.breakfast)
      breakfast.forEach(item => { console.log(item)})
    })
    this.setState({
      breakfast: breakfast,
      dataSource: response.data,
    });
  }).catch((error) => {
    Toast.show({
      text: "[Error] Network Error, Please try again later",
      buttonText: "Okay",
      type: "danger",
      duration: 3000
    })
  });
}
weightData = ({item}) => {
  item.breakfast.forEach(
    item => {
      console.log(item)
      return (
        <ListItem>
          <Text>{item}</Text>
          <CheckBox style={{ marginLeft:210, alignSelf: 'flex-end'}} checked={false} color="#FC7B04" />
        </ListItem>
      )
    }
  );  
}
render() {
  return (
    <View style={styles.dietCard}>
      <FlatList
        inverted
        data={this.state.dataSource}
        renderItem={ this.weightData }
        keyExtractor={(item, index) => index}
      />
    </View>
  );
}

and here is the result of the console.log(item)

3x Eggs
2x Bread
Cup of Milk

but the problem is nothing is showing on the screen I tried to re-irritate the items so 3 items are shown but with no luck? any ideas? and if I removed the foreach loop i get the 3 elements of the array in the same listitem not i want them in seperate list items

I suggest backing up and doing something simple: show just the keys "breakfast", "lunch", and "dinner". — Code-Apprentice
– Code-Apprentice, Commented Nov 20, 2019 at 21:42
To figure out what is wrong in your code, follow the tips given in this article. — Code-Apprentice
– Code-Apprentice, Commented Nov 20, 2019 at 21:43
Can't help without seeing implementation of ListItem component. — cltsang
– cltsang, Commented Nov 21, 2019 at 3:18

Jyubin Patel · Accepted Answer · 2019-11-21 05:30:33Z

1

Use SectionList like below which full-fill your requirement.

<SectionList
    sections={DATA}
    keyExtractor={(item, index) => item + index}
    renderItem={({ item }) => <Item title={item} />}
    renderSectionHeader={({ section: { title } }) => (
      // your renderUI view code is here..
    )}
  />

follow below link for more details. https://facebook.github.io/react-native/docs/sectionlist

answered Nov 21, 2019 at 5:30

Jyubin Patel

1,3737 silver badges19 bronze badges

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

1 Comment

Jyubin Patel Over a year ago

Welcome @mohamedadel

Collectives™ on Stack Overflow

React Native Flatlist nested loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related