Build React Components Incrementally based on conditions

Question

I have an array of objects prjLvlData. This array contains information that I use to conditionally render a component.

In my .jsx file I have

{
  prjLvlData.map(ele => {

    if (ele.fields.level_exp === 'portfolio' && ele.fields.has_experience) {
      return <div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnPortfolio${id}`}>Portfolio</div>
    } else {
      return <div className="btn btnAddBadge button noCursor projectLevelBtn" id={`btnPortfolio${id}`}>Portfolio</div>
    }
    if (ele.fields.level_exp === 'program' && ele.fields.has_experience) {
      return <div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnProgram{id}`}>Program</div>
    } else {
      return <div className="btn btnAddBadge button noCursor projectLevelBtn " id={`btnProgram{id}`}>Program</div>
    }
    if (ele.fields.level_exp === 'project' && ele.fields.has_experience) {
      return <div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnProject${id}`}>Project</div>
    } else {
      return <div className="btn btnAddBadge button noCursor projectLevelBtn" id={`btnProject${id}`}>Project</div>
    }
  })
}

How can I build them so that by the end of the 3 if statements, I return the built-up component, instead of returning inside every if statement?

I want something like this, in pseudo code

var component = <div>

if (...)
  component += thing1
if (...)
  component += thing2

return component + <div>

joews · Answer 1 · 2017-07-07T22:32:34.320

You could return an Array of elements:

 {prjLvlData.map(ele => {
   const elements = [];

   if (ele.fields.level_exp === 'portfolio' && ele.fields.has_experience) {
     elements.push(<div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnPortfolio${id}`}>Portfolio</div>)
   } 

   // etc...

   return elements;
)}

This happens inside a map, so you'll need to flatten the Array to a single level of nesting to embed it in another component. A utility library like lodash or a short JavaScript function can do that:

Here's an example:

const nestedElements = prjLvlData.map(/* function from above */);
const flatElements = flatten(nestedElements);

const rendered = <p>
  {flatElements)
</p>

score 1 · Answer 2 · answered Jul 07 '17 at 22:36

You can use switch statement to calculate detect needed title and then use just one return statement:

{prjLvlData.map(ele => {
    const active = ele.fields.has_experience ? 'active' : '';
    let title = '';

    switch (ele.fields.level_exp) {
        case 'portfolio':
            title = 'Portfolio';
            break;

        case 'program':
            title = 'Program';
            break;

        case 'project':
            title = 'Project';
            break;
    }

    return <div className={`btn btnAddBadge button noCursor projectLevelBtn ${active}`} id={`btnProject${id}`}>{title}</div>;
})}

Build React Components Incrementally based on conditions

2 Answers2