DEV Community

loading...

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

Collapse
alarid profile image
Yohann Legrand • Edited

Really interesting, thanks for sharing ! I'm really curious to test out this pattern and see how it goes when the "variant" components (the Text components in your example) tend to vary in terms of props, including some additional ones that may need to come from above ! Might be a little tricky

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