Rendering conditionals in our code for react.js jsx

Question

Which is better practice??

{someBoolean ? <showMe/> : null }

or

{someBoolean && (<showMe/>)}

does it matter in the end? what are pros and cons? do we need to call null? Can one vs the other cause problems down the road? what is different syntax doing anyway?

Answer 1

On my case I prefer using this {someBoolean && ()} instead of the {someBoolean ? : null }. This answer is based on my preference. Pros: you will never need to consider the ':null' else statement on the end and if you have a lot of types for the someBoolean for example you have default props for that component and your report form will have a lot of someBooleantypes you need to consider them at the same time.

In cases like

<ParentComponent />
  <ChildComponent someBoolean={true}/>
</ParentComponent>

<ParentComponent />
  <ChildComponent someBooleanv2={true}/>
</ParentComponent>

ChildComopnent.jsx
const ChildComponent =({someBoolean,someBooleanv2})=>{
  return (<div>
    {someBoolean && !someBooleanv2 (<showMe/>)}
    {someBooleanv2 && !someBoolean  (<showMeV2/>)}
  <div/>);
}

Most of the time I use it on a single ReportsForm if I would like to use it overtime to be efficient with formik functionalities