DEV Community

loading...

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

Collapse
moubi profile image
Miroslav Nikolov Author

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>
  );
Enter fullscreen mode Exit fullscreen mode

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

Some comments have been hidden by the post's author - find out more