title: Pass a component as props
body: <p>I have my card component, in which I need to pass another component into to display unique content for each different card. At the moment, I am passing the example component &quot;Foot&quot; in a ternary operator, but I also need to pass &quot;Patio&quot;, &quot;Fence&quot; and &quot;Deck&quot;, which relate to specific title props. I hope this all makes sense, here's my code -</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import Foot from &quot;../Footing&quot;;
  
  const Card = (props) =&gt; {
    const [showContent, setShowContent] = useState(false);
    const contentClick = () =&gt; {
      setShowContent(true);
    };
  
    return (
      &lt;div&gt;
        &lt;h1&gt;{props.job}&lt;/h1&gt;
        &lt;button onClick={contentClick}&gt;Calculate&lt;/button&gt;
        {showContent &amp;&amp; &lt;Foot /&gt;}
        &lt;hr&gt;&lt;/hr&gt;
      &lt;/div&gt;
    );
  };
  
  export default Card;
  </code></pre>