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>
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.
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>;
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>
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>
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>
)
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>
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.