How to render a multiline map function in React

Let's assume that we created a simple React component to display some fruits. If we wanted to render a multiline map function, we could use a parenthesis after the arrow.


import React from 'react';

const App = () => {
    const fruits = [
        {name: 'banana', emoji: '🍌'}, 
        {name: 'apple',  emoji: '🍎'}, 
        {name: 'grape',  emoji: '🍇'}
        <div className = 'Fruits'>
            {{name, emoji}) => (
                <div className = 'Fruit'>
                    I'm a {name} and my icon is {emoji}

export default App;

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.