React-Native for loop 使用 FlatList 给出错误

Question

I am new in programming. I would like to render list dynamically. The parent component Navbar has state with Food Type category like Mexican, Chinese. Each of the FoodTypes have their respective Menu

What I like is to render first FoodType and then its respective Menu in FlatList. The data is saved in Navbar Component. I can render the FoodType using FlatList, but problem is in for loop logic.The for loop is giving me error. Please see the sandbox:

https://codesandbox.io/s/hungry-lamarr-p8mq3

The relevant code is below(line 130-154), in Menu Component

render() {
   
    return (
      <View className="container-fluid">
    
    <Text> Here use Flatlist</Text>
    
    
    for (let i = 0; i < this.props.Objs_Type.length; i++) {
    <FlatList 
    data={this.props.Objs_Type}
    renderItem={({item})=>
    <Text>{item.FoodType[i]}</Text>
    <Text>{item.Menu[i]}</Text>
   }
   keyExtractor={(item,index)=>item.id}
   /> 
  };
 
  
    </View>

    ) 
  }

Answer 1

use nested flat list one vertical and horizontal flatlist to get the ui

check below code snack: https://snack.expo.io/@ashwith00/list

code:

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

const data = [
  {
    title: 'Chinese',
    data: [1, 2, 3, 4],
  },
  {
    title: 'Mexican',
    data: [1, 2, 3, 4],
  },
  {
    title: 'Indian',
    data: [1, 2, 3, 4],
  },
  {
    title: 'Indian',
    data: [1, 2, 3, 4],
  },
];
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const renderCategory = ({ item }) => (
    <View style={{ alignSelf: 'stretch', height: 200, marginBottom: 20 }}>
      <Text>{item.title}</Text>
      <FlatList
        keyExtractor={(_, i) => i.toString()}
        data={item.data}
        horizontal
        renderItem={renderBar}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );

  const renderBar = ({ item }) => (
    <View
      style={{
        height: '100%',
        width: 240,
        backgroundColor: 'red',
        marginRight: 10,
      }}
    />
  );
  return (
    <View style={styles.container}>
      <FlatList
        showsVerticalScrollIndicator={false}
        data={data}
        keyExtractor={(_, i) => i.toString()}
        renderItem={renderCategory}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Answer 2

You need to change your render() function in this way:

render() {

    return (
        <View className="container-fluid">

            <Text> Here use Flatlist</Text>

            <FlatList
                data={this.props.Objs_Type}
                renderItem={({ item }) => (
                    <View>
                        <Text>{item.FoodType}</Text>
                        <Text>{item.Menu}</Text>
                    </View>
                )}
                keyExtractor={(item, index) => item.id}
            />

        </View>

    )
}

Answer 3

The error which I saw in the sandbox link you provided is "Unexpected token". Whenever you get this error, it is most likely due to a syntactic mistake. In your case, it was missing curly braces around your for-loop. Remember whenever you embed any JavaScript code into a JSX block, make sure you encapsulate the JavaScript codes within curly braces.

return (
   <jsx-code>
     {
        some-js-logic like if-else, etc.
     }
   </jsx-code>
)

Now in your case, even if you add a pair of braces, it won't work, because the for loop in JSX won't work that way. More on this in the first link which I provided at the end.

And to solve your problem, you don't have to use a for-loop at all. The FlatList component accepts the array in its data param. So you don't have to loop through the array. All you got to do is use the items of this array to render your own UI. Here's a sample which is the simplest representation of your code snippet.

  render() {
    return (
      <View className="container-fluid">
        <Text> Here use Flatlist </Text>
        {
          this.generateFlatList(this.props.Objs_Type)
        }
      </View>
    );
  }

  generateFlatList(objsTypes) {
    console.log(objsTypes);
    return (
      <FlatList
        data={objsTypes}
        renderItem={({item}) => <Text>{item.FoodType}</Text>}
        keyExtractor={(item) => item.id}
      />
    );
  }

Here are some links which might help you learn more about using for-loop in React JSX and FlatList component:

• https://flaviocopes.com/react-how-to-loop/
• https://reactnative.dev/docs/flatlist

Answer 4

Thanks all for the valuable comments. Helped me learned alot. If someone is interested, below is the corrected code

  <View className="container-fluid">
        <Text> Here use Flatlist</Text>

        <FlatList
          data={this.props.Objs_Type}
          renderItem={({ item }) => (
            <React.Fragment>
              <Text>{item.FoodType}</Text>
              {item.Menu.map(e => (
                <Text>{e}</Text>
              ))}
            </React.Fragment>
          )}
          keyExtractor={item => item.id}
        />
      </View>

renderItem if you put two tags like two Texts, it will iterate it automatially. So in my case, i had two items in Food_Type and 3 Menu items in each of Food_Type. if you just use two Text each for Food_Type and Menu, it will first print Chinese, then the array ofMenu of Chinese. To display Menu vertically i had to use map.