Hola, estoy haciendo un menú de pestañas ahora mismo. Mi problema es que quiero dar is-active cuando se hace clic en el botón, pero no sé qué valor poner en el espacio vacío allí.
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 Cómo usar el valor del índice If you click the 0th button, index : 0 If you click the 1st button, index: 1 Después de hacerlo así, className={activeIndex === index ? "is-active" : ""} Si pones index , funcionará normalmente, pero no sé cómo hacer un índice como ese.
¿Cómo puedo configurar el índice para dar primer clic 0 segundo clic 1 de acuerdo con el valor del clic?
Debe comparar la propiedad index con la propiedad selectedTab (que presumiblemente existe en el componente principal, ya que pasa la función setSelectedTab al componente TabTitle ).
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;Puedes ver un ejemplo simple en codesandbox.