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

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

• javascript
• reactjs

• 1 You can't use document.getElementById in ReactJS stackoverflow./questions/38093760/… – 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 Commented Jan 14, 2020 at 14:44
• You have to use createRef – wentjun Commented Jan 14, 2020 at 14:44

3 Answers 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.

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

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;