Cannot read property 'value' of null in ReactJS

Question

I've been trying to console.log these 2 inputs, but can't seem to figure it out, can anyone tell me what I've done wrong? I keep getting the Cannot read property 'value' of null error

function printInputs() {
  let username = document.getElementById('user').value
  let password = document.getElementById('pass').value

  console.log(username);
  console.log(password);

}

function App() {

  return (
    <div className="App">
      <h1>Log In</h1>
      <h1>{code}</h1>
      <form>
        <input className='userInput' id='user' type='text' placeholder='username' /><br />
        <input className='userInput' id='pass' type='password' placeholder='password' /><br />
        <input className='userSubmit' type='submit' value='Log In' onSubmit={printInputs()} />
      </form>
    </div>
  );
}

You can't use document.getElementById in ReactJS https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele — ButchMonkey, Jan 14 '20 at 14:42
Does this answer your question? [How to access a DOM element in React? What is the equilvalent of document.getElementById() in React](https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele) — Murat Karagöz, Jan 14 '20 at 14:44

score 3 · Answer 1 · answered Jan 14 '20 at 14:45

onSubmit={printInputs()}

You are trying to call printInputs immediately (before the render function has returned anything so before the inputs are in the page).

You need to pass a function to onSubmit:

onSubmit={printInputs}

That said, this is not the approach to take for getting data from forms in React. See the Forms section of the React guide for the right approach.

score 1 · Accepted Answer · answered Jan 14 '20 at 14:48

The way to write forms in react. Working example demo

function App() {
  const [state, setState] = React.useState({ username: "", password: "" });
  const handleSubmit = e => {
    e.preventDefault();
    console.log(state);
  };
  const handleChange = e => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };
  return (
    <div className="App">
      <h1>Log In</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="userInput"
          name="username"
          type="text"
          placeholder="username"
          onChange={handleChange}
        />
        <br />
        <input
          className="userInput"
          name="password"
          type="password"
          placeholder="password"
          onChange={handleChange}
        />
        <br />
        <input className="userSubmit" type="submit" value="Log In" />
      </form>
    </div>
  );
}

Salim Slimani · Answer 3 · 2020-01-14T14:58:15.183

in the first never use real dom to manipulate the dom in React ,use a state to get de value and the onSumbit is used in Form tag

import React, { useState } from "React";
const App = () => {
    const [userName, setUserName] = useState("");
    const [password, setPassword] = useState("");
    const printInputs = () => {
        console.log(userName);
        console.log(password);
    };
    return (
        <div className="App">
            <h1>Log In</h1>

            <form onSubmit={printInputs}>
                <input
                    className="userInput"
                    id="user"
                    type="text"
                    placeholder="username"
                    onChange={event => setUserName(event.target.value)}
                />
                <br />
                <input
                    className="userInput"
                    id="pass"
                    type="password"
                    placeholder="password"
                    onChange={event => setPassword(event.target.value)}
                />
                <br />
                <input
                    className="userSubmit"
                    type="submit"


            value="Log In"/>
                </form>
            </div>
        );
    };
    export default App;

Cannot read property 'value' of null in ReactJS

3 Answers3