CODEWITHSUNDEEP
reactjsreact-native
mohamed adel
mohamed adel

Reputation: 715

React Native Flatlist nested loop

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 enter image description here

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

Upvotes: 0

Views: 869

Answers (1)

Jyubin Patel
Jyubin Patel

Reputation: 1373

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

Upvotes: 1

Related Questions