Hello I am making a tab menu right now. My problem is that I want to give is-active when the button is clicked, but I don't know what value to put in the empty space there.
type Props = {
title: string
index: number
setSelectedTab: (index: number) => void
}
const TabTitle: React.FunctionComponent<Props> = ({ title, setSelectedTab, index }) => {
// The value to be activated. Initial value is `0th button`
const [activeIndex, setActiveIndex] = useState(0);
const onClick = useCallback(() => {
setSelectedTab(index)
}, [setSelectedTab, index])
return (
<li>
<button
key={index}
className={activeIndex === [empty place] ? "is-active" : ""}
onClick={() => onClick()}
>
{title}
</button>
</li>
)
}
console.log(index);
// 0
// 1
// 2
How to use the index value If you click the 0th button, index : 0
If you click the 1st button, index: 1
After making it like this, className={activeIndex === index ? "is-active" : ""} If you put index , it will work normally, but I don't know how to make an index like that.
How can I set the index to give first click 0 second click 1 according to the clicked value?
You need to compare the index property to the selectedTab property (which presumably exists on the parent component, since you pass setSelectedTab function to the TabTitle component).
import { useCallback } from "react";
type Props = {
title: string;
index: number;
selectedTab: number; // <-- this should be passed by the parent
setSelectedTab: (index: number) => void;
};
const TabTitle: React.FunctionComponent<Props> = ({
title,
selectedTab,
setSelectedTab,
index
}) => {
const onClick = useCallback(
(index) => {
setSelectedTab(index);
},
[setSelectedTab]
);
return (
<li>
<button
key={index}
className={selectedTab === index ? "is-active" : ""} // it's active if its index is the same as the selected tab
onClick={() => onClick(index)} // <-- so it knows which button was clicked
>
{title}
</button>
</li>
);
};
export default TabTitle;
You can see a simple example on codesandbox.