What is difference in writing in two different ways below?
function App(isTrue){
if(isTrue)
return <ComponentA/>
else
return <ComponentB/>
}
// what is different if I write like this
function App(isTrue){
return(<>
{isTrue && <Component/>}
{!isTrue && <ComopnentB/>}
</>
)
}
1
There is no difference, in either case the same jsx – ComponentA will render.
The reasoning:
a) isTrue is a truthy value in either case
// It is an empty object - more specifically
// let us see this below
const isTrue = {}
isTrue ? true : false // will result true
b) The logical && expression, isTrue && Component A, will evaluate true and return the right-side value which is the component Component A.
c) !isTrue && Component A, will evaluate to a false value, which React will ignore from rendering.
d) Fragment tag <></> does not have any trace in the resultant HTML
2