Реагируйте на условный рендеринг с оператором ИЛИ

Question

Можно ли написать условный рендер с оператором ИЛИ в операторе? чтобы избежать двойного кода.

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

Как-то так, это не работает, конечно

РЕДАКТИРОВАТЬ: я мог бы написать:

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

и ниже:

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

Это то, чего я хочу достичь, но я два раза вызываю один и тот же компонент.

Answer 1

Попробуйте что-то вроде этого:

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