title: How make a predefined filtered array list reusable, to use in multiple React components
body: <p>We get multiple node types (teasers) from the api (<code>NodeTypeOne</code>, <code>NodeTwo</code>, <code>NodeTypeThree</code>).</p>
  <ul>
  <li>Those node types are rendered on multiple places, as a list inside my React app. I only need to render <code>NodeTypeOne</code> and <code>NodeTypeThree</code> in the list.</li>
  <li>Also I created Child components for those node type teasers <code>&lt;NodeTypeOne /&gt;</code> and <code>&lt;NodeTypeThree /&gt;</code> which returns some similar props (like title and label) but also some different props (based on the node type: <code>&lt;NodeTypeThree tag={nodeTypeThree.tag} /&gt;</code></li>
  </ul>
  <p>Currently I am using it like:</p>
  <pre><code>const MyBlock = ({ data }: Props) =&gt; {
  
    const filteredItems = data.items?.filter(
      (item) =&gt;
        item?.__typename.includes(&quot;NodeTypeOne&quot;) || item?.__typename.includes(&quot;NodeTypeThree&quot;)
    );
  
    return data?.items?.length ? (
      &lt;Block&gt;
          {filteredItems.map((node) =&gt; {
  
            if (node.type.includes(&quot;NodeTypeOne&quot;)) {
              const teaserOne = node as TeaserTypeOne;
  
              return (
                &lt;TeaserOne
                  key={teaserOne.id}
                  title={teaserOne.title}
                  subtitle={teaserOne.subtitle}
                /&gt;
              );
            }
            const teaserTypeThree = node as TeaserTypeThree;
            return (
              &lt; TeaserThree
                key={teaserTypeThree.id}
                title={teaserTypeThree.title}
                subtitle={teaserTypeThree.subtitle}
                tag={teaserTypeThree.tag}
              /&gt;
            );
          })}
      &lt;/Block&gt;
    ) : null;
  };
  
  export default MyBlock;
  </code></pre>
  <p>How do I make above logic reusable?</p>
  <p>For example I have cases where I have to add other props to create different styling etc:</p>
  <pre><code>         if (node.type.includes(&quot;NodeTypeOne&quot;)) {
              const teaserOne = node as TeaserTypeOne;
  
              return (
                &lt;TeaserOne
                  key={teaserOne.id}
                  title={teaserOne.title}
                  subtitle={teaserOne.subtitle}
                  anotherProp={anotherProp} // &lt;- this one is added here
                /&gt;
              );
            }
            const teaserTypeThree = node as TeaserTypeThree;
            return (
              &lt; TeaserThree
                key={teaserTypeThree.id}
                title={teaserTypeThree.title}
                subtitle={teaserTypeThree.subtitle}
                tag={tag}
                anotherProp={anotherProp} // &lt;- this one is added here
              /&gt;
            );
  </code></pre>
  <p>What is a good approach here?</p>