I'm trying to create a reusable component that allows me to pass in the `href`, `target`, `rel` 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.

I would like the map to happen within the `Social.tsx` file, then I can simply just add the component anywhere in my project and then pass the props to it.

Something like this:

```
<Social
  icons={[
    { icon: "facebook", href: "", target: "", rel: "" },
    { icon: "twitter", href: "", target: "", rel: "" },
    { icon: "discord", href: "", target: "", rel: "" }
  ]}
/>

```

I currently have my component:

**Social.tsx**

```
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as React from "react";

interface ISocial {
  href?: string
  target?: string
  rel?: string
}

const Social: React.FC<ISocial> = (props) => {
  return (
    <div>
      <a href={props.href} target={props.target} rel={props.rel}>
        {/* I don't want to hardcode the icon, but dynamically pass it as a prop */}
        <FontAwesomeIcon icon={["fab", "discord"]} />
      </a>
    </div>
  );
};

export default Social;

```

**App.tsx**

```
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 <Social />;

```

How can I adapt this to do what I described above?

> 
> **Here's a [CodeSandBox](https://codesandbox.io/s/reverent-field-85uxf)**
> 
> 
> 

Thanks for any help in advance!