React conditional rendering for nested if condition

Question

I want to check for multiple nested conditions. Cant seems to figure out a way to do it. First check if fine and there are no issues with that, but after the first check, when i add second check and no matter which brace i use to wrap it still throws an error.

Sample code:

  return (
      <Fragment>
        <div>
          { title }
        </div>
        <div>
          { check1 ?
            (<p>
              Status
            </p>

             { check2 ? 
              <p>
              <a >
             desc </a> desc
            </p> :
            <a>
            desc
          </a>
            }
            )
            :
            {
              check3 ?
              <p>
              <a>
                anchor
              </a>
              desc
            </p>
            :
            <p>
            <a 
             anchor
            </a>
            desc
          </p>
          }
        }
        </div>
      </Fragment>

You might be looking for this. https://stackoverflow.com/questions/37312122/how-to-do-a-nested-if-else-statement-in-reactjs-jsx — iismaell, May 24 '21 at 05:06

score 1 · Answer 1 · answered May 24 '21 at 05:33

Dude, you have a serious formatting problem, although there are a few missing symbols and fragments out there, so, try with this:

return (
  <Fragment>
    <div>{title}</div>
    <div>
      {check1 ? (
        <Fragment>
          <p>Status</p>

          {check2 ? (
            <p>
              <a>desc</a> desc
            </p>
          ) : (
            <a>desc</a>
          )}
        </Fragment>
      ) : (
        <Fragment>
          {check3 ? (
            <p>
              <a>anchor</a>
              desc
            </p>
          ) : (
            <p>
              <a>anchor</a> desc
            </p>
          )}
        </Fragment>
      )}
    </div>
  </Fragment>
)

score 0 · Answer 2 · answered May 24 '21 at 05:08

  return (
      <Fragment>
        <div>
          { title }
        </div>
        <div>
         {check1 ?
            <p>
              Status
            </p>
              : //here the mistack
              check2 ? 
              <p>
              <a >
             desc </a> desc
            </p> 
            :
             check3 ?
              <p>
              <a>
                anchor
              </a>
              desc
            </p>
            :
            <p>
            <a 
             anchor
            </a>
            desc
          </p>
          
        }
        </div>
      </Fragment>

Mistake: using ternary operator in react after a condition its should be a single view

copy and pest it. I think this will work for you Thanks.

score 0 · Answer 3 · answered May 24 '21 at 05:11

As mentioned in the docs

<Fragment>
<div>{title}</div>
<div>
    {check1 ? (
        <p>Status</p>
    ) : check2 ? (
        <p>
            <a>desk</a>
        </p>
    ) : check3 ? (
        <p>
            <a>anchor</a>
        </p>
    ) : (
        <p>
            <a>desc</a>
        </p>
    )}
  </div>
</Fragment>;

score 0 · Answer 4 · answered May 24 '21 at 05:12

I think you were missing > in a tag.

It is better to use () after each conditional rendering for more code readability.

Try something like below:-

    <Fragment>
      <div>{title}</div>
      <div>
        {check1 ? (
          <Fragment>
            <p>Status</p>
            {check2 ? (
              <p>
                <a>desc </a> desc
              </p>
            ) : (
              <a>desc</a>
            )}
          </Fragment>
        ) : (
          <Fragment>
            {check3 ? (
              <p>
                <a>anchor</a>
                desc
              </p>
            ) : (
              <p>
                <a>anchor</a>
                desc
              </p>
            )}
          </Fragment>
        )}
      </div>
    </Fragment>

score 0 · Answer 5 · answered May 24 '21 at 05:19

Use "()" this kind of braces. You are probably having problems as each input in ternary operator expects jsx with a single parent. Something like this

<div>
      { check1 ?
        <>
        <p>
          Status
        </p>
        ( check2 ?<p><a >desc </a> desc</p>
         :<a>desc </a>
         )
         </>
        
        :
        (
          check3 ?
          <p>
          <a>
            anchor
          </a>
          desc
        </p>
        :
        <p>
        <a>
         anchor
        </a>
        desc
      </p>
        )
    }
    </div>

score 0 · Answer 6 · answered May 24 '21 at 05:40

One working version is like below

return (
  <div>
    {check1 
        ? <div><p>Status</p>{ check2 ? <p><a>desc</a>desc</p> : <a>desc</a> }</div> 
        : check3 ? <p><a>anchor</a>desc</p> : <p><a>anchor</a>desc</p>
        }
   </div>
)

Compared to the origin one, we can see that we need to avoid {} directly inside {}, and return no more than one root element for every branch of ?:.

return (
  <div>
    {check1 
        ? (<p>Status</p> { check2 ? <p><a>desc</a>desc</p> : <a>desc</a> }) 
        : {check3 ? <p><a>anchor</a>desc</p> : <p><a>anchor</a>desc</p>}
    }
  </div>
)

React conditional rendering for nested if condition

6 Answers6