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;

    return(
        <Fragment>
            {productsObj.map(item => <a key={item.id} name={item.name} className="dropdown-link w-dropdown-link">{item.headline}</a>)}
        </Fragment>
    )