Conditional rendering of nested components based on condition

Question

Unsure how to write the following nested if/else as a nested ternary within a React app, i.e.

if (jobId === 1) {
  if (activeFlag === 1) {
    <RenderA />
  } else if (activeFlag === 2) {
    <RenderB />
  } else if (activeFlag === 3) {
    <RenderC />
  }
}

I tried:

{
 (jobId === 1) ?
    (activeFlag === 1) ? (<RenderA />) : (activeFlag === 2) ? (<RenderB />) 
}

Unsure if I am on the right track?

You can use ternary operator if you have if else condition. From what I see here, you dont render anything if jobId is other than 1 and similarly if activeFlag has value other than 1,2,3 — Drashti Dobariya, May 07 '21 at 09:30
Consider putting this logic in its own function or component, and then returning the JSX you want to render. You can then call this function, or use it as a component — Nick Parsons, May 07 '21 at 09:32
You could create an object literal: `const map = { 1: RenderA, 2: RenderB, etc }` and then get the component based on activeFlag like `const component = map[activeFlag]`. If not found, return null — adiga, May 07 '21 at 09:35
I was writing test cases for my solution when the question got marked as a duplicate, so I posted it [as an answer to the "primary" question](https://stackoverflow.com/a/67432973/8223070). (I don't claim that it's the best way to handle rendering in react, but it answers the question you asked instead of a similar question.) — Cat, May 07 '21 at 10:19

Sahil Ardeshna · Answer 1 · 2021-05-07T09:44:32.813

0

Try this jobId === 1 ? activeFlag === 1 ? <RenderA /> : activeFlag === 2 ? <RenderB /> : activeFlag === 3 && <RenderC /> : ""

edited May 07 '21 at 09:44

answered May 07 '21 at 09:29

Sahil Ardeshna

184
5

1

This doesn't check for `jobId === 1` for `RenderB` and `RenderC` – adiga May 07 '21 at 09:30
@adiga are you sure this will not work? If yes then please check this link https://replit.com/@sahilardeshna/AdmirablePitifulTrial#index.js – Sahil Ardeshna May 07 '21 at 09:37
1

For `jobId = 2, activeFlag = 2`, OP's code doesn't return anything because of the first `if (jobId === 1)` check. But, your code will return `RenderB` because you only have `jobId === 1` check for `RenderA` – adiga May 07 '21 at 09:40
@adiga yes you are right, answer updated. Thanks – Sahil Ardeshna May 07 '21 at 09:45
It works now. But, OP's code is easily understandable while your code with nested `?:` is unreadable. So, there is no reason to use this code. – adiga May 07 '21 at 09:47
Yes, That's true. Ternary is complicated when there are more than a condition. – Sahil Ardeshna May 07 '21 at 09:51
`a ? b : c ? d : e` is fine because the conditions execute in that order. But, `a ? b ? c : d : e` works like `a ? (b ? c : d) : e`. You'd need something like [astexplorer](https://astexplorer.net/#/gist/1ea1c3d52a085581150a72ed1f8c72a2/54c31dd5c9534fb1aa1fa5e728282d1649d9a867) to understand the execution order. – adiga May 07 '21 at 09:56
@adiga i get that. Thanks. – Sahil Ardeshna May 07 '21 at 10:03

Federkun · Answer 2 · 2021-05-07T09:41:45.193

A more readable solution could be create an inline render function as

const renderThisThing = () => {
  if (jobId !== 1) {
    return null
  }

  if (activeFlag === 1) {
    return <RenderA />
  }

  if (activeFlag === 2) {
    return <RenderB />
  }

  if (activeFlag === 3) {
    return <RenderC />
  }

  return null
}


const elementToIncludeInTheJSX = renderThisThing()

and then put {elementToIncludeInTheJSX} in the place you want to render the component. You can inline this function in the body of your component, or make it a real React component, and pass jobId and activeFlag as props.

function ComplexRenderComponent({ jobId, activeFlag }) {
  if (jobId !== 1) {
    return null
  }

  if (activeFlag === 1) {
    return <RenderA />
  }

  if (activeFlag === 2) {
    return <RenderB />
  }

  if (activeFlag === 3) {
    return <RenderC />
  }

  return null
}

and you use it as <ComplexRenderComponent jobId={jobId} activeFlag={activeFlag} /> in your component.

Conditional rendering of nested components based on condition

2 Answers2

Linked