change classeName react

Home.js

import React, {Component} from 'react';
import { Button } from 'reactstrap';
import {Link} from "react-router-dom"
import "./Home.css"
class Home extends Component {
    state = {
        todos:[],
        on:false
    };
    changeColor = () => {
       this.setState({on:!this.state.on})
    }

    render() {
        return (
            <div className={this.state.on? "red":"home"}>
                <h1>Todo List</h1>
                <Link to="/1">
                <Button color="light size="sm>Commencer</Button>{' '}
                </Link>
                <Button
                    onClick={this.changeColor}
                    color="light">
                    click</Button>
                {' '}
            </div>
        );
    }
}

export default Home;