Добавить класс?

Question

[Артур]

Добрый вечер.

я не могу добавить класс через реакт setState.

state = {
        done: false
    };
    onLabelClick = () => {
        this.setState({
            done: true
        });
    }
let classNames = "todo-list-item";
       if (done) {
        classNames += " done"
       }

А мой css выглядит вот так

.todo-list-item done {
 text-decoration: line-through;
}

По идее все с логикой верно должно быть, думаю ошибка в синтаксисе. Подскажите пожалуйста, где именно.
Благодарю за ответ)

Answer 1

[pashted]

.todo-list-item.done {
 text-decoration: line-through;
}

и еще есть смысл написать так:

state = {
        done: false,
    };
    
    onLabelClick = () => {
        this.setState({
            done: true
        });
    };

    render() {
        return (
            <div className={'todo-list-item' + (this.state.done ? ' done' : '')} onClick={this.onLabelClick}>text</div>
        );
    }

Comments

[Артур]

А откуда взялась точка в классе?
classNames += " done"
Тут то ее нет.

[pashted]

Артур, в css все классы начинаются с точки. вы же сами начали с точки, просто не дописали ее второму классу. ниже ее нет потому, что там уже html. в нем точки не нужны. там классы перечисляются через пробел в атрибуте class (или className в реакте)

[Алексей Уколов]

В todo-list-item её тоже нет, но вас это почему-то не смущает. Точка нужна, потому что так работает CSS.

[Антон Спирин]

Еще с подобным подходом к стилизации удобно использовать classnames