Adding Icon and Attributes

[qfung]

Hi Kate, Thank you so much for a wonderful tutorial! I do have two questions for you... Just wondering how to add Font Awesome Icons to your tabs and add additional attributes like Aria and Alt to them? I tried adding them through TabTitle component in Props and got errors. Please advise! Thank you!

[roblevintennis]

I'm sorry if this doesn't work without some tinkering; but my intuition is that you could do this…

For the Props you'd have to add it to the interface (pseudocode untested):

type Props = {
  title: string
  index: number
  setSelectedTab: (index: number) => void
  fa: ReactElement
}

then add it to destructured props and render

    <li>
      <button onClick={onClick}>{title} {fa}</button>
    </li>

and in your App build your tabs something like:

<Tab title="Lemon" fa={<FontAwesomeIcon icon={["fal", "coffee"]} />}>Lemon is yellow</Tab>