Soy novato en reaccionar. Tengo dos clases en el archivo css. Uno es btn y otro está activo. Quiero establecer una clase activa en el primer botón de forma predeterminada y cuando haga clic en otros botones, se eliminará y se agregará al botón actual. Estaré agradecido si alguien me ayuda con esto. Gracias por adelantado.
aqui estan mis codigos
import React, {useState} from 'react'; const Tab = () => { const [tabBtn, setTabBtn] = useState(false); const handleBtn = () => { setTabBtn(true); } return ( <div className='btnContainer'> <button className={"btn" + (tabBtn ? " active" : "")} onClick={handleBtn}>One</button> <button className='btn'>Two</button> <button className='btn'>Three</button> <button className='btn'>Four</button> <button className='btn'>Five</button> <button className='btn'>Six</button> <button className='btn'>Seven</button> </div> ); } export default Tab;Usa este código:
className={`btn ${tabBtn ? " active" : ""}`}Entonces, hagamos algunas optimizaciones aquí: Primero, coloquemos una matriz de todos sus botones y luego usemos el estado para rastrear cuál está seleccionado.
import React, {useState} from 'react'; const buttonList = ['One', 'Two', 'Three', 'Four']; const Tab = () => { const [tabBtn, setTabBtn] = useState('One'); return ( <div className='btnContainer'> { buttonList.map(b => {return ( <button className={b === tabBtn ? 'active' : '' } key={`${b}Button`} onClick={() => setTabBtn(b)} > {b} </button>)} )} </div> ); } export default Tab;Sin mapa
import React, {useState} from 'react'; const Tab = () => { const [tabBtn, setTabBtn] = useState('One'); return ( <div className='btnContainer'> <button className={'One' === tabBtn ? 'active' : '' } key={`One Button`} onClick={() => setTabBtn('One')} > One </button> <button className={'Two' === tabBtn ? 'active' : '' } key={`Two Button`} onClick={() => setTabBtn('Two')} > Two </button> </div> ); } export default Tab;Obviamente, agregue el resto de los botones hasta 7.