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(
        
            {productsObj.map(item => {item.headline})}
        
    )