I have followed an example to build a modal login and have a register to login screen transition but I can't make the function to be trigger the transaction working.

here is the code:

```
import React from "react";
import { Modal } from "react-bootstrap";
import '../../assets/styles/Login.css';

class LoginRegisterModal extends React.Component {  
    constructor(props, context) {
        super(props);
        this.state = {show: false};
        this.signup = React.createRef();
        this.signin = React.createRef();
        this.container = React.createRef();
    }

    open = () => {
        this.setState({show: true});
    }

    close = () => {
        this.setState({show: false});
    }

    componentDidMount(){
      this.signup.current.addEventListener('click', () => {
        this.container.current.classList.add('right-panel-active');
      });  

      this.signin.current.addEventListener('click', () => {
        this.container.current.classList.remove('right-panel-active');
      });  
    }

    componentDidUpdate(prevProps) {
        const { show } = this.props;
        if (prevProps.show !== show) {
          if (show) {
            this.open(); // open if parent says to
          } else {
            this.close(); // close if parent says to
          }
        }
    }

    requestSignIn = () => {
      this.close()
    }

    createAccount = () => {
      this.close()
    }

    requestForgotPassword = () => {

    }

    render() { 

      const styleModal = {
        marginTop: "15%",
        marginLeft: "30%",
        padding: 0,
        width:770,
        height:480,
        backgroundColor:"#ffffffff",
        borderRadius:21.5,
      } //style={styleModal}

      const styleHeaderWhite = {
        fontFamily: "Fredoka One",
        fontSize: "36px", 
        fontWeight: "normal",
        lineHeight: 1,
        color: "#ffffff"  
      }

      const styleHeaderBlack= {
        fontFamily: "Fredoka One",
        fontSize: "36px", 
        fontWeight: "normal",
        lineHeight: 1,
        color: "#333333"  
      }

      const styleTxtWhite = {
        fontFamily: "Source Sans Pro",
        fontSize: "14px", 
        fontWeight: "normal",
        lineHeight: 1,
        color: "#ffffff"  
      }

      const styleTxtBlack= {
        fontFamily: "Source Sans Pro",
        fontSize: "14px", 
        fontWeight: "normal",
        lineHeight: 1,
        color: "#616161"  
      }

      const whiteBtnStyle = {
        borderRadius: 21, 
        fontSize: "18px" ,
        fontWeight: "bold",
        textAlign: "center",
        color: "#ff7255",
        boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
        paddingTop: "5px",
        paddingBottom: "7px",
        paddingLeft: "20px",
        paddingRight: "20px",
        backgroundColor: "#ffffff", 
        borderColor: "#ffffff",
        fontFamily: "Source Sans Pro",
    }

    const formStyle = {
      width: "280px",
      height: "40px",
      marginTop:"10px",
      borderRadius: 20,
      backgroundColor: "#f4f7f8",
      fontFamily: "Source Sans Pro",
      textAlign: "left",
    }

      const loginModal = <div class="containerLogin" ref={this.container}>
                          <div class="form-container sign-up-container">
                            <form action="#">
                              <h1 style={styleHeaderBlack}>Sign up.</h1>
                              <div class="social-container">
                              <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                              <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                              </div>
                              <span style={styleTxtBlack}>or use your email for registration</span>
                              <input style={formStyle} type="text" placeholder="Name" />
                              <input style={formStyle} type="email" placeholder="Email" />
                              <input style={formStyle} type="password" placeholder="Password" />
                              <button style={whiteBtnStyle} onClick={this.createAccount}>Sign Up</button>
                            </form>
                          </div>
                          <div class="form-container sign-in-container">
                          <form action="#">
                            <h1 style={styleHeaderBlack}>Sign in.</h1>
                            <div class="social-container">
                                <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                                <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                                <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                            <span style={styleTxtBlack}>or use your account</span>
                            <input style={formStyle} type="email" placeholder="Email" />
                            <input style={formStyle} type="password" placeholder="Password" />
                            <a style={styleTxtBlack} href="#" onClick={this.requestForgotPassword} >Forgot your password?</a>
                            <button style={whiteBtnStyle} onClick={this.requestSignIn} >Sign In</button>
                          </form>
                          </div>
                          <div class="overlay-container">
                            <div class="overlay">
                              <div class="overlay-panel overlay-left">
                                  <h1 style={styleHeaderWhite}>Sign in.</h1>
                                  <p style={styleTxtWhite}>
                                    Nice to see you again.Login and continue the journey.
                                  </p>
                                  <button style={whiteBtnStyle} class="ghost" ref={this.signin}>Sign In</button>
                              </div>
                              <div class="overlay-panel overlay-right">
                                  <h1 style={styleHeaderWhite}>Hey, new friend!</h1>
                                  <p style={styleTxtWhite}>New to the Village? Sign up and start your journey</p>
                                  <button style={whiteBtnStyle} class="ghost" ref={this.signup}>Sign Up</button>
                              </div>
                            </div>
                          </div>
                        </div>;

      return (       
        <Modal className="modal" show={this.state.show}  size="lg" > 
            {loginModal}
        </Modal>
        );  
    }  
}  

export default LoginRegisterModal;

```

So it seems that all is properly working in terms of css but I can't have these functions working

```
    componentDidMount(){
      this.signup.current.addEventListener('click', () => {
        this.container.current.classList.add('right-panel-active');
      });  

      this.signin.current.addEventListener('click', () => {
        this.container.current.classList.remove('right-panel-active');
      });  
    }

```

Css:

```
h1 {
    font-weight: bold;
    margin: 0;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

button {
    border-radius: 200px;
    border: #ff7255;
    border-style: solid;
    border-width: 2px;
    border-bottom-left-radius: 20px;
    background-color: #ffffff;
    color: #ff7255;
    font-size: 20px;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
    text-align: center;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: #ffffff;
    border-color: #ffffff;
}

form {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #dddddd;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

.modalLogin {
    background-color: #ff4b2b;
    margin-top: "15%";
    margin-left: "30%";
    padding: 0;
    width:770px;
    height:480px;
    border-radius:21.5px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.25);
  }

.containerLogin {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    position: absolute;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

.overlay {
    background: #ff7255;
    background-size: cover;
    background-position: 0 0;
    color: #ffffff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

```

I am trying to achieve this : <https://www.youtube.com/watch?v=mUdo6w87rh4>

I keep getting the error `TypeError: Cannot read property 'addEventListener' of null` when clicking. 

Any idea ?
Thanks