Render JSX element only when another element is null

October 13, 2022

I have a page, the structure looks like this:

export default function MyBidPage() {
  return (
    <div className="children:mb-4">
      <AskToQualifyForm />
      <CreateBidSection />
      <DocumentsSection />
      <AboutBidderSection />
      <ExclusionGroundsSection />
      <SelectionCriteriaSection />
    </div>
  );
}

I want to hide <CreateBidSection /> only when <AskToQualifyForm /> is present in the page. How could I do that?

I was thinking about something like this:

{! <AskToQualifyForm /> && <CreateBidSection />}

but sadly it’s not a valid code 🙁

P.S. A method without using state would be highly appreciated

>Solution :

Further to T.J. Crowder’s comment above,

export default function MyBidPage({...props}) {
  const { canAskToQualify = false } = props || {};
  return (
    <div className="children:mb-4">
      {canAskToQualify && <AskToQualifyForm />}
      {!canAskToQualify && <CreateBidSection />}
      <DocumentsSection />
      <AboutBidderSection />
      <ExclusionGroundsSection />
      <SelectionCriteriaSection />
    </div>
  );
}

If one is able to send the flag as a prop into the method, then it may be used to conditionally display the two components.

NOTE: This may be one possible way to achieve the desired result.