The worm The worm - 1 month ago 168
React JSX Question

getElementById in React when it is not null

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

Answer

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