React conditional rendering with OR operator

Question

Is it possible to write a conditional render with an OR operator in the statement? to avoid double code.

{regions && || regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions || regionsWithAnimals.regions }
      />
    </div>
  </>
)}

Something like this, this is not working of course

EDIT: I could write:

{regions &&  (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions }
      />
    </div>
  </>
)}

and below:

{regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regionsWithAnimals.regions }
      />
    </div>
  </>
)}

This is what I want to achieve, but I'm calling two times the same component.

Do you mean ternary operator ? And please describe your problem with proper source code, its unclear. — Robin
– Robin, Commented Apr 9, 2020 at 9:53
I could write: ``` {regions && ( <> <h4>Title</h4> <div> <RegionsMap regions={regions } /> </div> </> )} ``` and below: ``` {regionsWithAnimals && ( <> <h4>Title</h4> <div> <RegionsMap regions={regionsWithAnimals } /> </div> </> )} ``` This is what I want to achieve, but I'm calling two times the same component. — Rowin_nb2
– Rowin_nb2, Commented Apr 9, 2020 at 9:54
(regions || regionsWithAnimals) && ... Though I should point out in your example if both are true they each render, but what you describe you want is for one or the other to render. Just keep the conditions in the same order in the component. — Drew Reese
– Drew Reese, Commented Apr 9, 2020 at 9:56
I'm sorry guys, the comment don't format. I updated the startpost with the code I want to achieve. @DrewReese If I do that, it will give me the error Type '{ name: string; path: string; }[] | undefined' is not assignable to type 'regions'. Type 'undefined' is not assignable to type '{ name: string; path: string; }[]'. By defining the props 'regions'. — Rowin_nb2
– Rowin_nb2, Commented Apr 9, 2020 at 9:58

LHIOUI · Accepted Answer · 2020-04-09 10:07:38Z

5

Try something like this:

{(regions || regionsWithAnimals && regionsWithAnimals.regions) && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions || regionsWithAnimals.regions  }
       />
    </div>
  </>
)}

edited Apr 9, 2020 at 10:07

answered Apr 9, 2020 at 10:01

LHIOUI

3,3372 gold badges27 silver badges40 bronze badges

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

7 Comments

Rowin_nb2 Over a year ago

Object is possibly undefined if do that

LHIOUI Over a year ago

What "Object' ?

Rowin_nb2 Over a year ago

<RegionsMap regions={regions || regionsWithAnimals.regions } /> I'm sorry, I missed some code. regionsWithAnimals.regions is possibly undefined. And if I write the following code: regions={RegionsPerCountry || isRegion?.regions} it will give the following error:

Type '{ name: string; path: string; }[] | undefined' is not assignable to type 'regions'.   Type 'undefined' is not assignable to type '{ name: string; path: string; }[]'.

LHIOUI Over a year ago

I updated the Answer, you check also for regionsWithAnimals && regionsWithAnimals.regions

Rowin_nb2 Over a year ago

Still object is possibly undefined after your updated answer

|

Collectives™ on Stack Overflow

React conditional rendering with OR operator

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related