How to do loop inside JSX of ReactJS?

As we all know that JSX in ReactJS is syntactic sugar which is not plain HTML. Let say we have a list of products that we want to render using JSX. We need to loop over the products but inside JSX it is a bit tricky to do the loop. The map is an ideal loop inside JSX.

    const contextValue = useContext(AppContext);
    const campaignObj = contextValue.selectedCampaign;
    const productsObj = campaignObj.products;

            { => <a key={} name={} className="dropdown-link w-dropdown-link">{item.headline}</a>)}