title: React TS - How to map through FontAwesome icons and display them
body: <p>I'm trying to create a reusable component that allows me to pass in the <code>href</code>, <code>target</code>, <code>rel</code> attributes along with the type of FontAwesome Icon I would like to use. I'd like to be able to pass as many icons as I would like into this list and it would map through them, using the Social component as a template.</p>
  
  <p>I would like the map to happen within the <code>Social.tsx</code> file, then I can simply just add the component anywhere in my project and then pass the props to it.</p>
  
  <p>Something like this:</p>
  
  <pre><code>&lt;Social
    icons={[
      { icon: "facebook", href: "", target: "", rel: "" },
      { icon: "twitter", href: "", target: "", rel: "" },
      { icon: "discord", href: "", target: "", rel: "" }
    ]}
  /&gt;
  </code></pre>
  
  <p>I currently have my component:</p>
  
  <p><strong>Social.tsx</strong></p>
  
  <pre><code>import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  import * as React from "react";
  
  interface ISocial {
    href?: string
    target?: string
    rel?: string
  }
  
  const Social: React.FC&lt;ISocial&gt; = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;a href={props.href} target={props.target} rel={props.rel}&gt;
          {/* I don't want to hardcode the icon, but dynamically pass it as a prop */}
          &lt;FontAwesomeIcon icon={["fab", "discord"]} /&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    );
  };
  
  export default Social;
  </code></pre>
  
  <p><strong>App.tsx</strong></p>
  
  <pre><code>import * as React from "react";
  import "./styles.css";
  import Social from "./components/Social";
  
  export default function App() {
    // I'd like to be able to pass in a list of different icons
    // followed by the href, target, rel, etc for each item.
    // The Social component would be able to map through them
    // and display them.
    return &lt;Social /&gt;;
  </code></pre>
  
  <p>How can I adapt this to do what I described above?</p>
  
  <blockquote>
    <p><strong>Here's a <a href="https://codesandbox.io/s/reverent-field-85uxf" rel="nofollow noreferrer">CodeSandBox</a></strong></p>
  </blockquote>
  
  <p>Thanks for any help in advance!</p>