React map method

`import React from 'react'
import { navLinks } from '../../constants/index.js'

const Navbar = () => {
return (

Velvet Pour

    <ul>
        {navLinks.map((link) => (
            <li key={link.id}>
                <a href={`#${link.id}`}>{link.title}</a>
            </li>
        ))}
    </ul>



    </div>
</nav>

)
}

export default Navbar`

export const navLinks = [
    {id: 'cocktails', title: 'Cocktails'},
    {id: 'about', title: 'About Us'},
] 

import React from 'react'
import { cocktailLists } from '../../constants'

const Cocktails = () => {
return (

<div className='list'>
    <div className='popular'>
        <h2>Most popular cocktails:</h2>

        <ul>
            {cocktailLists.map(({name, country,detail, price}) => (
                <li key={name}>
                    <div className='md:me-28'>
                        <h3>{name}</h3>
                        <p>{country} | {detail}</p>
                    </div>
                    <span>- {price}</span>
                </li>
            )

        )}
        </ul>

    </div>
</div> 
</section>

)
}

export default Cocktails

``