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.

Example:

jsx
import React from 'react';

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

export default App;