Quiero cambiar algunos estilos del texto de la pestaña de mi barra de navegación. Quiero cambiar de página cada vez que hago clic en la pestaña. Y para eso quiero que esa pestaña esté activa. He escrito código como:
Encabezado.js
import React from "react"; import "./Header.css"; import Tab from "./Tab"; const tabs = ["About", "Portfolio", "Blogs", "Contact"]; const Header = () => { const return ( <div className="header"> {tabs.map((elem, indx) => { return <Tab key={indx} text={elem} />; })} </div> ); }; export default Header;Encabezado.css
.header { width: 100%; background-color: transparent; z-index: 1; color: white; padding: 1em; box-shadow: 2px 2px 2px 2px rgb(66, 65, 65); display: flex; gap: 2em; justify-content: flex-end; }Tab.js
import React, { useState } from "react"; import "./Tab.css"; const Tab = ({ text }) => { const [active, setActive] = useState(false); return ( <div className="tab"> <div className={`text ${active && "active"}`} onClick={() => setActive(true)}> {text} </div> </div> ); }; export default Tab;Tabulador.css
.tab { padding: 0.3; } .text { font-size: 1.1rem; } .active { color: chocolate; border-bottom: 1px solid chocolate; } .text:hover { color: chocolate; cursor: pointer; }Ahora, cuando hago clic en la pestaña, se activa y al hacer clic en otra pestaña, ambas se activan, pero solo quiero que una esté activa. ¿Cómo puedo cambiar el código para lograr lo que quiero?
Debe elevar el estado de la Tab activa del componente Pestaña al Header y configurar una devolución de llamada que se pasará al componente Tab para actualizar el estado en el padre.
Deberías terminar con algo como:
const tabs = ['About', 'Portfolio', 'Blogs', 'Contact'] const Header = () => { const [activeTab, setActiveTab] = useState(''); const handleTabClick = useCallback((tab) => { setActiveTab(tab); }, []); return ( <div className="header"> {tabs.map((elem) => { return <Tab key={elem} text={elem} isActive={elem === activeTab} onTabClick={handleTabClick} />; })} </div> ); } const Tab = ({ text, isActive, onTabClick }) => { return ( <div className="tab"> <div className={`text ${isActive && "active"}`} onClick={() => onTabClick(text)} > {text} </div> </div> ); }