How make a predefined filtered array list reusable, to use in multiple React components

Question

We get multiple node types (teasers) from the api (NodeTypeOne, NodeTwo, NodeTypeThree).

• Those node types are rendered on multiple places, as a list inside my React app. I only need to render NodeTypeOne and NodeTypeThree in the list.
• Also I created Child components for those node type teasers <NodeTypeOne /> and <NodeTypeThree /> which returns some similar props (like title and label) but also some different props (based on the node type: <NodeTypeThree tag={nodeTypeThree.tag} />

Currently I am using it like:

const MyBlock = ({ data }: Props) => {

  const filteredItems = data.items?.filter(
    (item) =>
      item?.__typename.includes("NodeTypeOne") || item?.__typename.includes("NodeTypeThree")
  );

  return data?.items?.length ? (
    <Block>
        {filteredItems.map((node) => {

          if (node.type.includes("NodeTypeOne")) {
            const teaserOne = node as TeaserTypeOne;

            return (
              <TeaserOne
                key={teaserOne.id}
                title={teaserOne.title}
                subtitle={teaserOne.subtitle}
              />
            );
          }
          const teaserTypeThree = node as TeaserTypeThree;
          return (
            < TeaserThree
              key={teaserTypeThree.id}
              title={teaserTypeThree.title}
              subtitle={teaserTypeThree.subtitle}
              tag={teaserTypeThree.tag}
            />
          );
        })}
    </Block>
  ) : null;
};

export default MyBlock;

How do I make above logic reusable?

For example I have cases where I have to add other props to create different styling etc:

         if (node.type.includes("NodeTypeOne")) {
            const teaserOne = node as TeaserTypeOne;

            return (
              <TeaserOne
                key={teaserOne.id}
                title={teaserOne.title}
                subtitle={teaserOne.subtitle}
                anotherProp={anotherProp} // <- this one is added here
              />
            );
          }
          const teaserTypeThree = node as TeaserTypeThree;
          return (
            < TeaserThree
              key={teaserTypeThree.id}
              title={teaserTypeThree.title}
              subtitle={teaserTypeThree.subtitle}
              tag={tag}
              anotherProp={anotherProp} // <- this one is added here
            />
          );

What is a good approach here?

Answer 1

you can assign a component to variable so in your case it would be:

const Component = node.type.includes("NodeTypeOne") ? TeaserOne : TeaserThree;

return (
            < Component
              key={teaserTypeThree.id}
              title={teaserTypeThree.title}
              subtitle={teaserTypeThree.subtitle}
              tag={teaserTypeThree.tag}
            />
          );