Как изменить стили у элемента в React?

Question

[Диас Галымбек]

Проблемы при
1клике -> добавляется класс но не значение.
2клике -> удаляется класс но добавляется высота текста, а не значения 80 как я хотел
3клике -> добавляется класс но добавляется значение 80, а не высота текста как я хотел

самый важный минус это не рендерится компонент.

Где я допустил ошибку?

const Post = ({ post }) => {
    const [heightDesc, setHeightDesc] = useState();
    const descRef = useRef();

    function unwrapDesc() {
        descRef.current.classList.toggle("active");

        if (descRef.current.classList.contains("active")) {
            setHeightDesc(descRef.current.scrollHeight);
            descRef.current.style.height = heightDesc + "px";
        } else {
            setHeightDesc(80);
            descRef.current.style.height = heightDesc + "px";
        }
    }

    return (
        <div className="post">
            <h2 className="post__title">{post.title}</h2>
            <img className="post__img" src={post.img} alt={post.title} />
            <p ref={descRef} className="post__desc">
                {post.desc}
            </p>
            <button className="post__btn" onClick={unwrapDesc}>
                Развернуть
            </button>
        </div>
    );
};

Comments

[Andrey Vasilev]

тут из нужного кода только jsx)
зачем обращаться напрямую к DOM вообще? ситуация примитивная
если нету classNames, то есть как минимум: a ? classA : classB

[Andrey Vasilev]

типо того
const [isOpen, setOpen] = useState(false);

<p className={isOpen ? 'post__desc' : 'post__desc--open'}>

[Диас Галымбек]

Andrey Vasilev, а как брать размер элемента? Через event?

[Andrey Vasilev]

Диас Галымбек, зачем размеры элемента?
Как я вижу у тебя есть текст для статьи скрытый, по клику ты его хочешь резвернуть
Значит:
У тебя есть класс с высотой минимальной (ещё не открыт текст)
И есть класс с высотой максимальной (мы видим весь текст)
Ну и тут у тебя два состояния которые ты меняешь по клику и вешаешь классы по условию

[Andrey Vasilev]

Диас Галымбек,
isOpen = true
ставим класс post__desc--open который определит высоту по контенту
isOpen = false
ставим класс post__desc который имеет height: 80px

[Диас Галымбек]

Andrey Vasilev, да но при стиле 100% нету анимации

[Andrey Vasilev]

Диас Галымбек, так это немного другая проблема уже)
анимацию не так сложно сделать через css и react