getElementById in React

Question

Getting this error at the moment:

Uncaught TypeError: Cannot read property 'value' of null

I call this in my render function below:

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData}/>

I also have tried calling it in here

componentWillMount: function(){
        var name = document.getElementById('name').value;
      },

How can I get the id of an input text field and read that value and ensure it is not null?

I think the DOM is loading after I try to read the element hence why it is null

1. try `componentDidMount`, 2. if the input is part of your React component, use refs, e.g. `` and `var name = this.refs.name`, 3. Your example input has `id="cp-dev1"` but you try to get element with `id="name"` which doesn't exist in the code you have posted. Does it exist anywhere in your app? — pawel, Oct 26 '16 at 08:22
how do I pass the value from componentDidMount into another function then? I.e. the var name how can I pass that into another function? — The worm, Oct 26 '16 at 08:28
Ive got it partially working but componentDidMount completes it on load but I would rather submit it once I have typed in the values and clicked — The worm, Oct 26 '16 at 09:25

Shubham Khatri · Accepted Answer · 2017-11-21T07:22:20.947

31

You need to have your function in the componentDidMount lifecycle since this is the function that is called when the DOM has loaded.

Make use of refs to access the DOM element

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData} ref = "cpDev1"/>

  componentDidMount: function(){
    var name = React.findDOMNode(this.refs.cpDev1).value;
    this.someOtherFunction(name);
  }

See this answer for more info on How to access the dom element in React

edited Nov 21 '17 at 07:22

answered Oct 26 '16 at 08:30

Shubham Khatri

270,417
55
406
400

2

It is said that string based refs are likely to be deprecated in the near future, superseded by the callback based syntax: `ref={input => this.input = input}` – John Weisz Oct 26 '16 at 08:41
when I do this it submits them as empty strings? – The worm Oct 26 '16 at 09:13
can you please elaborate. it doesn't print name when you console.log() or what – Shubham Khatri Oct 26 '16 at 09:14
ok my bad, yours is working but instead of doing it on mount/on load I would rather do it on click? can I just name the function something different to componentDidMount? – The worm Oct 26 '16 at 09:19
componentDidMount is a react lifecycle function and is automatically called. In order to do it on click you can name the function something else and the call it as `onClick={this.handleClick}` – Shubham Khatri Oct 26 '16 at 09:31
2

In React documentation page it says that "... use findDOMNode(), but it is discouraged.". Be aware of it. https://reactjs.org/docs/refs-and-the-dom.html – Ula Jul 06 '18 at 14:19
7

This is legacy now! – Zameer Ansari Oct 30 '19 at 14:29

HarshvardhanSharma · Answer 2 · 2019-03-31T18:05:38.257

4

You may have to perform a diff and put document.getElementById('name') code inside a condition, in case your component is something like this:

// using the new hooks API
function Comp(props) {
  const { isLoading, data } = props;
  useEffect(() => {
    if (data) {
      var name = document.getElementById('name').value;
    }
  }, [data]) // this diff is necessary

  if (isLoading) return <div>isLoading</div>
  return (
    <div id='name'>Comp</div>
  );
}

If diff is not performed then, you will get null.

edited Mar 31 '19 at 18:05

answered Mar 31 '19 at 17:21

HarshvardhanSharma

754
2
14
28

1

Strange, is there a document about this? – Ferit Apr 17 '20 at 09:43
When the prop "isLoading" is true would mean that the data is not available to the component and the element with id "name" does not exist in the DOM. On success of API call only, after the "isLoading" state is set to `false` would that element be rendered to the DOM. – HarshvardhanSharma Apr 18 '20 at 10:14

score -2 · Answer 3 · edited Jan 18 '23 at 16:28

-2

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("satoshi");
  const handleClick = () => {
    setName(document.getElementById("name").value);
  };
  return (
    <div>
      <input id="name" />
      <h2> {name} </h2>
      <button onClick={handleClick} />
    </div>
  );
}

export default App;

edited Jan 18 '23 at 16:28

zero_cool

3,960
5
39
54

answered Oct 27 '20 at 02:03

Ankit Raj

11

Please always give some description, related to the code you are posting so that any future reader know what exactly happening. – Not A Bot Oct 27 '20 at 04:19
Add explanation to your answer, so others can understand what exactly you are doing to resolve the issue. – Nitin Zadage Oct 27 '20 at 05:14

getElementById in React

3 Answers3

Linked