Блог

У меня есть компонент сборника рассказов, используемый в моем проекте, и я хочу создать группу кнопок, которая берет одну из этих кнопок и при нажатии добавляет активный класс, но когда нажимается другая кнопка с тем же классом, она отключает другую, поэтому ее единственная кнопка с активным классом, это для группы кнопок. Пока я могу заставить его работать с одной кнопкой, но если я добавлю больше, то активный класс все равно появится на остальных.

Код до сих пор:

Оригинальный компонент сборника рассказов

 import React from 'react';
import './Button.scss';

interface ButtonProps {
    children: React.ReactNode;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    variant: string | string;
    className?: string | string;
}

const Button: React.FunctionComponent<ButtonProps> = (props: ButtonProps) => {
    return (
        <button type="button" onClick={props.onClick} className={`btn-${props.variant}`}>{props.children}</button>
    )
}

export default Button;
 

Другой компонент

 const ActiveBtn: React.FunctionComponent = () => {

    const [active, setActive] = React.useState<boolean>(true)
    const handleClick = () => {
        alert()
        setActive(toggle => !toggle)}
    return (
        <>
        <Button variant={active ? 'tertiary' : 'tertiary-active'} onClick={handleClick}>{active ? '.Active' : 'Active'}</Button>
        </>
    )
}
 

используется в компоненте через

 <ActiveBtn />