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 stackoverflow.com/questions/38093760/… — ButchMonkey
– ButchMonkey, Commented Jan 14, 2020 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 — Murat Karagöz
– Murat Karagöz, Commented Jan 14, 2020 at 14:44

Quentin · Accepted Answer · 2020-01-14 14:45:35Z

3

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.

answered Jan 14, 2020 at 14:45

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

akhtarvahid · Accepted Answer · 2020-01-14 14:48:35Z

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 · Accepted Answer · 2020-01-14 14:58:15Z

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;

Collectives™ on Stack Overflow

Cannot read property 'value' of null in ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related