ReactJs

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'essaye de faire en sorte que lors du scroll, ma state "className" passe de "box" à "green", mais je sens que je ne suis pas loin mais je ne vois pas où est le soucis.
Je cherche a faire en sorte que lorsque le component passe sur l'écran, ce dernier change de classe.

import React from 'react'

import './onScroll.css';

class Scroll extends React.Component {

    constructor(props) {
        super(props);
        this.state = {className: "box"}
    };

    handleScroll(e) {
        let element = e.target;
        if (element.scrollHeight - element.scrollTop === element.clientHeight) {
            this.setState({className :"green"})
        }
    }

    render() {
        return (
            <div className={this.state.className} onScroll={this.handleScroll}></div>
        );
    }

}

export default Scroll

.box {
    width: 100%;
    height: 100vh;
    background-color: gray;
    cursor: pointer;
    transition:  1s;
    opacity :0;
}

.green {
    opacity:1;
    transition: 1s;
}

Et en fait, ma box reste en opacity: 0, elle ne change donc pas de classe, mais je ne comprend pas pourquoi.

Si quelqu'un pourrait m'aider?

Merci!