How do I write Mulitiple if statments inside array.map() call

I have an array of data, and inside a react component I would like to render some JSX based on a property of each item in the array.

This is the code so far:

  return (
        <div>
            <p> Render CMS Components for `{location.pathname}`</p>

            {componentItems.map(componentItem => (

                if (componentItem.Name == "namehere") {
                <p>render compnent here</p>

            }
            if (componentItem.Name == "namehere2") {
                <p>render compnent 2 here</p>

            }
            if (componentItem.Name == "namehere3") {
                <p>render compnent 3 here</p>

            }

            ))}

        </div>
    );
}
export default RenderCmsComponents;

>Solution :

To use if inside the map callback arrow function, it has to be a full function body arrow function, not a concise-form one, so the first character after => has to be { and you have to have an explicit return.

Something like this:

// ...
return (
    <div>
        <p> Render CMS Components for `{location.pathname}`</p>

        {componentItems.map(componentItem => {
            switch (componentItem.Name) {
                case "namehere":
                    return <p key={componentItem.Id}>render compnent here</p>;
                case "namehere2":
                    return <p key={componentItem.Id}>render compnent 2 here</p>;
                case "namehere3":
                    return <p key={componentItem.Id}>render compnent 3 here</p>;
                // *** Recommend handling the default case where none matches! ***
            }
        })}

    </div>
);

But if the <p>...</p> part is unchanging, I would extract it out to avoid repeating it:

// ...
return (
    <div>
        <p> Render CMS Components for `{location.pathname}`</p>

        {componentItems.map(componentItem => {
            let pbody;
            switch (componentItem.Name) {
                case "namehere":
                    pbody = <TheFirstComponent />;
                    break;
                case "namehere2":
                    pbody = <TheSecondComponent />;
                    break;
                case "namehere3":
                    pbody = <TheThirdComponent />;
                    break;
                // *** Recommend handling the default case where none matches! ***
            }
            return <p key={componentItem.Id}>{pbody}</p>;
        })}

    </div>
);

If the components all take exactly the same props, you could also have a lookup table for them:

// ...in some unchanging part of things...
const componentsByName = new Map([
    ["namehere",  TheFirstComponent],
    ["namehere2", TheSecondComponent],
    ["namehere3", TheThirdComponent],
]);

// ...then...
return (
    <div>
        <p> Render CMS Components for `{location.pathname}`</p>

        {componentItems.map(componentItem => {
            let BodyComponent = componentsByName.get(componentItem.Name);
            if (!BodyComponent) {
                // Handle the fact you have no mapping
            } else {
                return <p key={componentItem.Id}><BodyComponent relevant="props" here /></p>;
            }
        })}

    </div>
);