Set each active className on react Tab components - reactjs

Question

I'm trying to add active class on each tabtitle so that it can have some styles when clicked. but I have no idea how to add active class on this components, please tell me some solutions, I really appreciate all the help.
App.tsx
import React from "react"
import Tabs from "../Tabs"
import Tab from "../Tabs/Tab"
function App() {
return (
<Tabs>
<Tab title="Lemon">Lemon is yellow</Tab>
<Tab title="Strawberry">Strawberry is red</Tab>
<Tab title="Pear">Pear is green</Tab>
</Tabs>
)
}
Tabs.tsx
import React, { ReactElement, useState } from "react"
import TabTitle from "./TabTitle"
type Props = {
children: ReactElement[]
}
const Tabs: React.FC<Props> = ({ children }) => {
const [selectedTab, setSelectedTab] = useState(0)
return (
<div>
<ul>
{children.map((item, index) => (
<TabTitle
key={index}
title={item.props.title}
index={index}
setSelectedTab={setSelectedTab}
/>
))}
</ul>
{children[selectedTab]}
</div>
)
}
export default Tabs
Tabtitle.tsx
import React, { useCallback } from "react"
type Props = {
title: string
index: number
setSelectedTab: (index: number) => void
}
const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index }) => {
const onClick = useCallback(() => {
setSelectedTab(index)
}, [setSelectedTab, index])
return (
<li>
<button onClick={onClick}>{title}</button>
</li>
)
}
export default TabTitle
Tab.tsx
import React from 'react'
type Props = {
title: string
}
const Tab: React.FC<Props> = ({ children }) => {
return <div>{children}</div>
}
export default Tab
Here is the source.
https://medium.com/weekly-webtips/create-basic-tabs-component-react-typescript-231a2327f7b6

Answer 1

So personally what I would do is:
<TabTitle
key={index}
title={item.props.title}
click={() => setSelectedTab(index)}
selected = (selectedTab === index)
/>
and
const TabTitle: React.FC<Props> = ({ key, title, click, selected}) => {
return (
<li className={selected ? "shiny" : "not-shiny"} key={key}>
<button onClick={click}>{title}</button>
</li>
)
}
That way we don't need to worry about passing the index from tabTitle ALL the way back up, we can simply hand it a function to trigger with the variables pre-filled (we already have access to them within the map method!).
As for actually passing the info about whether or not the tab is selected, we can simply check in the map method whether the current index is = the one held in state. If this evaluates to true we give the tabtitle one class, and if not we give it another.
Note there are lots of different ways to achieve this, this is just the first one that came to mind.
If you wanted to share state information between many different components lower in the tree you might want to check out using React Context providers and the useContext hook.
Also I'm not sure item.props works like that?? I might be wrong though? Maybe someone else will confirm.
Hope this is helpful.

Answer 2

import React from "react"
import Tabs from "../Tabs"
import Tab from "../Tabs/Tab"
function App() {
return ( <Tabs>
<Tab title="Lemon">Lemon is yellow</Tab>
<Tab title="Strawberry">Strawberry is red</Tab>
<Tab title="Pear">Pear is green</Tab>
</Tabs> )
}