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;

Doug Coburn · Accepted Answer · 2019-07-03 01:00:53Z

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;

ravibagul91 · Accepted Answer · 2019-07-03 01:17:41Z

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>
    )
}

answered Jul 3, 2019 at 1:17

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related