React - JSX syntax issue, and how to iterate with map and display items on newlines

Question

I\'m a React noob and making a ToDo list style Recipe List app. I have a functional component, Item.js, and I am using JSX and the map function to iterate through each recipe it

Answer 1

If you add curly braces after the fat arrow, you will have to explicitly return the JSX.

const Item = (props) => (
  

    


      {props.items.map((item, index) => {
          return (
              


              
{item}

              

                   {props.ingredients[index].map((ingredient, ingredientIndex) => {
                      return (
                           

                               {ingredient}
                           
                     )
                   }}
              


              

                 props.edit(item, index)}>Edit
                 props.delete(item, index)}>Delete
              

            
          )
        }
      )}
    
  
)