Problem with React "Cannot read property 'addEventListener' of null"

Question

Trying to add the login function to the login button but for some reason it says that "Cannot read property 'addEventListener' of null" and I have no idea how to fix it.

I have added the window.onload = function(){} which worked on my other component but doesn't work on this one.

Problem is in this part.

window.onload = function(){
document.getElementById("submit").addEventListener("click", function(){
    UserLogin();
})
}

and here is the whole code:

import React from 'react';
import './App.css';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './Config';
//import { BrowserRouter as Router, Route, Link } from "react-router-dom";

firebase.initializeApp(firebaseConfig);



function UserLogin(){
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        //var errorCode = error.code;
        //var errorMessage = error.message;
      });
}

window.onload = function(){
    document.getElementById("submit").addEventListener("click", function(){
        UserLogin();
    })
}


function Login(){
    return(
        <div class="start">
            <h1>Login</h1>
            <div class="input">
                <input id="email" type="text" placeholder="email"></input>
                <input id="password" type="password" placeholder="password"></input>
                <button id="submit">Login</button>
            </div>
        </div>
    )
}

export default Login;

Answer 1

If you want your UserLogin function should get called automatically when your component finishes loading, then you can make use of Hooks (Added in React 16.8).

import React, {useEffect} from 'react';


function Login(){
    useEffect(() => {
      UserLogin();
    });
    return(
        <div class="start">
            <h1>Login</h1>
            <div class="input">
                <input id="email" type="text" placeholder="email"></input>
                <input id="password" type="password" placeholder="password"></input>
                <button id="submit">Login</button>
            </div>
        </div>
    )
}

Answer 2

Login is likely not rendered yet when window.onload is called.

Why not just use the onClick property on the button?

import React from 'react';
import './App.css';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './Config';
//import { BrowserRouter as Router, Route, Link } from "react-router-dom";

firebase.initializeApp(firebaseConfig);



function UserLogin(){
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        //var errorCode = error.code;
        //var errorMessage = error.message;
      });
}

function Login(){
    return(
        <div class="start">
            <h1>Login</h1>
            <div class="input">
                <input id="email" type="text" placeholder="email"></input>
                <input id="password" type="password" placeholder="password"></input>
                <button id="submit" onClick={UserLogin}>Login</button>
            </div>
        </div>
    )
}

export default Login;