Conditional rendering from a functional component

Question

I'd like to conditionally render a React component like this:

parent.ts

   ...
   <Parent>
     <Child/>
   <Parent>
   ...

child.ts

   ...
   return (someBoolean && <Component/>)
   ...

I get a TypeScript error in child.ts that Its return type 'false | Element' is not a valid JSX element. Its return type 'false | Element' is not a valid JSX element.

I want the conditional to be in child.ts , because it is used in other places as well, not just parent.ts . What's the appropriate way to do this? Would I have to settle for a ternary or if/else?

Answer 1

i think you lost { to evaluate }

return (<>
          {someBoolean && <Component/>}
        </>)

Answer 2

In my experience using hundreds of thousands of ternaries in React, I would recommend using it like

const A = () => {
  // Never in a form where it's easy to miss the ternary symbols
  // Leads to bugs...
  return (superUnderTip >= Math.pow(UserService.count(), 2)) ? 
  <ProviderTrainsFully lights={{hgih: 33}} rest={"too many null"} /> : null;

  // Always in this form so your brain can super easily scan for the
  // test and the output component.
  return (superUnderTip >= Math.pow(UserService.count(), 2))
    ? <ProviderTrainsFully lights={{hgih: 33}} rest={"too many null"} />
    : null;
    
  // Never in a nested ternary -- make child components for additional
  // conditional rendering.
}