inline-logic-comparison.jsx

// inline conditional rendering

const Page = () => (
  <Modal>
    { showModalHeader && (
       <ModalHeader />
     )}
    { showModalMessage && (
       <showModalMessage />
     )}
    {showOkButton ? <OkButton /> : <CloseButton />}
  </Modal>
)
   
// conditional rendering

// conditional rendering in seperate functions leads to a larger bundle size

function ModalHeader(showModalHeader) {
  if (showModalHeader) {
    return <ModalHeader />;
  }
}

function ModalMessage(showModalMessage) {
  if (showModalHeader) {
    return <ModalHeader />;
  }
}

function ModalButton(showOkButton) {
  if (showOkButton) {
    return <OkButton /> 
  }
  return <CloseButton />
}

const Page = ({ showModalHeader, showModalMessage }) => (
  <Modal>
    {ModalHeader(showModalHeader)}
    {ModalMessage(showModalMessage)}
    {ModalButton(showOkButton)}
  </Modal>
)