Conditional list rendering in React

Question

I have this sidebar component and I want to show the sidebar elements differently if the user is a simple user or is admin.

I have this isManager boolean saved in my state. If isManage is true, I want to loop on the complete links array. If isManager is false, I want to loop on the same array but without the last three elements (a simple array.splice).

But I get confused with JSX syntax and I don't know where to put the condition.

return (
    <div className="flex-item--fill flex--column scops-sidebar-content-container">
      <ul>
        {links.map((link) => (
          <li
            key={link.id}
            className="pad-half--left"
            style={{
              backgroundColor: `${
                activeTabId === link.id ? '#4065d0' : 'var(--color-primary)'
              }`,
            }}
          >
            <button
              className="btn--plain full-width align--left unpad"
              style={{ color: 'white' }}
              onClick={(e) => tabHandler(e, link.id)}
            >
              {link.name}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );

This is my component. Thanks a lot

Before you return your JSX element inside of the actual function, you could use your isManager flag to create a new array of links to render, where you perform your splice on the existing links array, so you can remove the last 3 links that you don't want if the isManager flag is false. — ConnorTJ
– ConnorTJ, Commented Oct 28, 2021 at 8:06

René Link · Accepted Answer · 2021-10-28 08:15:29Z

3

In addition to Michael P. Bazos answer:

I usually move as much logic as I can outside JSX, because it makes JSX harder to read and you might accidentially change logic by just editing view things.

Thus I would make the decision just before the JSX.

 const linksToRender = isManager ? links : links.slice(0, -3));

 return (
   <div className="flex-item--fill flex--column scops-sidebar-content-container">
     <ul>
       {linksToRender.map((link) => (
         // ....
       ))}
     </ul>
   </div>
);

answered Oct 28, 2021 at 8:15

René Link

52k15 gold badges119 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

oligofren Over a year ago

Totally agree. Makes it much easier to read when the JSX is as branch-less as possible.

Michel · Accepted Answer · 2021-10-28 08:40:25Z

2

{(isManager ? links : links.slice(0, -3)).map(link => 
   (...JSX FOR LINK...)
)}

links.slice(0, -3) returns the array minus the last three elements. E.g.:

[1, 2, 3, 4, 5].slice(0, -3) => [1, 2]

Note the we are using slice, and not splice which would mutate the links array as it deletes elements from it.

Note2: I wanted to show the minimal path to reach the answer. Naturally, for better clarity, you can add a line of code and store the result of the condition to a local variable, as suggested by René Link (whose name fits perfectly the answer)

edited Oct 28, 2021 at 8:40

answered Oct 28, 2021 at 8:07

Michel

28.6k6 gold badges67 silver badges72 bronze badges

6 Comments

fra.mstr Over a year ago

You put that condition inside the return?

Michel Over a year ago

Exactly where you have your map function, under the <ul> tag

Andrew F Over a year ago

@MichaelP.Bazos links must bу mapped too, so we need something like this: renderLinks = isManager ? links : links.slice(0, -3)); renderLinks.map(link => (...JSX FOR LINK...))

fra.mstr Over a year ago

i want to map the links if isManager, and sliced links if !isManager so i guess it's better to put it outside the jsx return

Michel Over a year ago

So this is what is done, as the map function applies to whichever array comes out of the conditional expression evaluation.

|

Collectives™ on Stack Overflow

Conditional list rendering in React

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related