How do I display items in a nested array in react native?

Question

I am working on a project in react native and how the program should work is that the user will start at RestaurantScreen.js and then once they pick a restaurant they will move to the next screen, MenuScreen.js. I want each restaurant to display the specific meal inside the nested array productData array in data.js. Right now the RestaurantScreen.js displays all the restaurants from the array restaurantData inside data.js but once you click on a restaurant it displays all the meals from each restaurant, but I just want the one meal, price, and image. Let me know if I need to provide move info.

data.js

export const restaurantData = [
    {restaurantName:"Milan Mondayz", 
    businessAddress:"The Steak House of Hammond",
    images:require('../images/milanpic.jpg'),
    productData:[{
    meal:"BBQ Chicken Plate with Sides", 
    foodImages:require('../images/Food1.jpg'),
    price:12.00,
    checked:false,id:"0"}],
    id:"0"},

    {restaurantName:"Nick's Cajun Flavors", 
    businessAddress:"123 Hammond Road",
    images:require('../images/cajun.jpeg'),
    productData:[{
    meal:"Crawfish Etouffee", 
    price:13.99,
    foodImages:require('../images/crawfishEto.jpeg'),
    checked:false}],
    id:1},
];

RestaurantScreen.js

export default function RestaurantScreen({ navigation }) {

  const [indexCheck, setIndexCheck] = useState("0")
  const { navigate } = useNavigation();

    return (
    <View style={styles.container}>
      <View style={styles.cardView}>
        {/*<Button
          title="Go to Menu"              
          onPress ={()=>{navigation.navigate("Menu",{restaurantData})}}
    />*/}
          <View style ={styles.headerTextView}>
              <Text style ={styles.headerText}>Where Do You Want To Eat?</Text>
          </View>        
          <View>     
            <FlatList
              style={{marginTop:10, marginBottom:10}}
              data={restaurantData}
              vertical ={true}
              keyExtractor={(restaurantData => restaurantData.id)}
              extraData={indexCheck}
              renderItem={({ item, index }) => (
                <RestaurantCard 
                  screenWidth={SCREEN_WIDTH*.94}
                  images={item.images}
                  restaurantName={item.restaurantName}
                  businessAddress={item.businessAddress}
                  //productData={item.productData}
                  OnPressRestaurantCard ={()=>{navigation.navigate("Menu",{index});
                }}
                    
                />
              )}
              showsVerticalScrollIndicator={false}

            />
        </View>
      </View>        
    </View>
 
    )
}

MenuScreen.js

export default class MenuScreen extends Component {

  render() {
    const index = this.props.route.params.index
    //const {meal,price,foodImages} = restaurantData[index]
    return (
      
     
      <View style={styles.container}>
        <View style={styles.cardView}>
        <View style ={styles.headerTextView}>
          <Text style ={styles.headerText}>What Do You Want To Eat From?</Text>
        </View> 
        <TouchableOpacity   onPress={() => {this.props.navigation.navigate('Cart')}}>
              <View style ={styles.cartContainer}>
                <View style ={styles.cartCounterContainer}>
                  <Text style ={styles.cartText}>Cart</Text>
                    <View style ={styles.cartCounter}>
                      <Text style ={styles.cartNum}>0</Text>
                    </View>
                </View>
              </View>
        </TouchableOpacity>
        <View>
        <View style ={{flex:1}}>
            <View style ={styles.menuCard}>
                <FlatList 
                    style={{marginTop:10, marginBottom:10}}
                    data = {restaurantData}
                    keyExtractor= {item =>item.id}
                    renderItem = {({item,index})=>(
                      <MenuCard 
                        screenWidth={SCREEN_WIDTH*.9}
                        images={item.foodImages}
                        meal ={item.meal}
                        price ={item.price}
                        onPressMenuCard={()=>{this.props.navigation.navigate("Payment")}}
                      />
                    )}
                />
            </View>  
        </View>
        </View>
        </View>
      </View>
  )
  }
    
}

Answer 1

I can do it with SectionList and this is my example: https://snack.expo.dev/@pqv2210/exsectionlist

Just change name of field in your restaurantData: productData to data

export const restaurantData = [
  {
    restaurantName: 'Milan Mondayz',
    businessAddress: 'The Steak House of Hammond',
    images: require('../images/milanpic.jpg'),
    data: [
      {
        meal: 'BBQ Chicken Plate with Sides',
        foodImages: require('../images/Food1.jpg'),
        price: 12.0,
        checked: false,
        id: '0',
      },
    ],
    id: '0',
  },

  {
    restaurantName: "Nick's Cajun Flavors",
    businessAddress: '123 Hammond Road',
    images: require('../images/cajun.jpeg'),
    data: [
      {
        meal: 'Crawfish Etouffee',
        price: 13.99,
        foodImages: require('../images/crawfishEto.jpeg'),
        checked: false,
      },
    ],
    id: 1,
  },
];

Replace FlatList to SectionList and modify RestaurantCard is item of list in renderItem.

const renderRestaurentInfo = ({ section }) => (
  // render restaurantName, images and businessAddress
)

const renderFoodItem = ({ item }) => (
  //  render meal, foodImages, price
)

<SectionList
  sections={restaurantData}
  renderSectionHeader={renderRestaurentInfo}
  keyExtractor={(_, index) => index + ''}
  renderItem={renderFoodItem}
/>