Реагировать - вращать шеврон при нажатии

Question

Я пытаюсь повернуть шеврон при нажатии на него, используя состояние для переключения className, но не могу заставить его работать. Компонент выглядит так:

import React, { useState } from 'react';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const FilterGroup = () => {
    const [rotateChevron, setRotateChevron] = useState(false);

    const handleRotate = () => setRotateChevron(!rotateChevron);

    return (
             <ExpandMoreIcon className={"filters__chevron " + rotateChevron ? "rotate" : null} onClick={handleRotate} />
           )
    }

export default FilterGroup;

Это CSS:

.filters__chevron {
    border-radius: 2px;
    transition: all 2 linear;
}

.filters__chevron.rotate {
    transform:rotate(180deg);
}

Любая помощь приветствуется. Спасибо!

Answer 1

Попробуйте следующее:

className={`filters__chevron ${rotateChevron ? "rotate" :''}`}

Answer 2

import React, { useState } from 'react';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const FilterGroup = () => {
    const [rotateChevron, setRotateChevron] = useState(false);

    const handleRotate = () => setRotateChevron(!rotateChevron);

    const rotate = rotateChevron ? "rotate(180deg)" : "rotate(0)"

    return (
             <ExpandMoreIcon style={{ transform: rotate, transition: "all 0.2s linear" }} onClick={handleRotate} />
      )
}

export default FilterGroup;