Which is the better pattern for conditional rendering of components that might not have the required props?

[jroebu14]

I'm keen to know if it's better to have conditional render logic inside of the component itself or in the parent component.

const Text = ({ content }) => {
  if (!content) {
    return null;
  }
  return <p>{content}</p>;
};

// then used like
{<Text content={content} />}

versus

const Text = ({ content }) => <p>{content}</p>;

// then used like
{content && <Text content={content} />}