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;

CodePudding user response：

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>
);

CodePudding user response：

In you map function, you need to use curly brackets and specify return statements explicitly.

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

            {componentItems.map(componentItem => { // curly brackets here

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

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

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

            }

            })} // curly closing bracket too

        </div>
    );
}
export default RenderCmsComponents;

CodePudding user response：

You can use && operator for this:

import { Fragment } from 'react'

// ...
 const conditionalRender(item) {
     return (
         <Fragment>
                componentItem.Name == "namehere" && <p>render compnent here</p>
                componentItem.Name == "namehere2" && <p>render compnent 2 here</p>
                // etc..
         </Fragment>     
    )
 }

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

        </div>
    );
}
export default RenderCmsComponents;

CodePudding user response：

you just need to write "return" keyword in if statement

export default function App() {
  var arr = ['abc' , 'pqr' , 'xyz'];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {
        arr.map(i => {
          if(i == 'abc'){
            return <p>ABC</p>
          }
          if(i == 'xyz'){
            return <p>XYZ</p>
          }
        })
      }
    </div>
  );
}