How to use map to display values from list on screen in React Native-CodePudding

New to react native, I'm trying to present data from a list of ingredients onto my screen, but I'm having trouble with the syntax when using JSX.

I get a red fuzzy line around the indicated curly brace which shows that I have a syntax error. Please let me know how I can complete this task.

import React, { useEffect, useContext, useState } from "react";
import { View, Text, StyleSheet } from "react-native";

    const BadFood = (ingredients) => {
       return (
           <View>
               <Text>
                Bad Ingredients
               </Text>
               {ingredients.map(ing)=> (
                   <View>
                       <Text>{ing}</Text>
                   </View> 
               )} 
           </View> //fuzzy line in the curly brace above this
       )
    }

CodePudding user response：

There are several issues in your code

import React, { useEffect, useContext, useState } from "react";
import { View, Text, StyleSheet } from "react-native";

// ingredients is in props.ingredients so destructure it 
const BadFood = ({ingredients}) => {
   return (
       <View>
           <Text>
            Bad Ingredients
           </Text>
           {ingredients.map((ing)=> (
               <View>
                   <Text>{ing}</Text>
               </View> 
           )// missing closing brace of map function
          )} 
       </View> //fuzzy line in the curly brace above this
   )
}

Please look into react-native syntax, you need to look into example codes.