Discussion on: React Patterns: A Component with Many Content Variants

[Miroslav Nikolov]

That will bring some load to Box.js as it will need to know about these props.

If the overall output of the text components remains the same — meaning that at the end they still return text with the same structure — but the props change, you can do something like that:

  // Box.js

  ...

  if (storage === 0) {
    TextComponent = StorageEmptyText;
    handleClick = openDialogAction;
    TextComponentProps = { prop1: "value", prop2: "value" };

  } else if (storage > 50 && storage < 80) {
    TextComponent = StorageAboveAverageText;
    handleClick = manageStorageAction;
    TextComponentProps = { prop3: "value" };
  } 
  ...

  return (
    <div className="Box">
      <TextComponent {...TextComponentProps}>
        {({ title, description, link }) => (
          ...
        )}
      </TextComponent>
    </div>
  );

Or render (not assign) <TextComponent /> as part of the Box's conditional logic. It is a matter of taste.