Can't add a ref to an object which will be reloaded by setState

Question

I just wanted to add a ref to object because I have to clear its value. I wrote like :

this.code = (
    <div className="form-group">
          <label className="form-label" htmlFor="target">Target</label>
          <input className="input" onChange={this.handleChange.bind(this)} ref="textbox" id="target" type="text" placeholder="Target" />
        </div>
);
this.setState(this.state);

And got an error like:

Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded

All I want to do is simple : If I click a button, the existing form will be cleared, and some other form will come up. To do that, I tried using a setState method. Is it a wrong approach?

from what I know ref need a function as the input. Can you show us the textbox function? — Hana Alaydrus, Jul 19 '17 at 06:10
@HanaAlaydrus, Its not a necessity but a suggested way . Check this https://stackoverflow.com/questions/38093760/in-react-js-is-there-any-function-similar-like-document-getelementbyid-in-ja/38093981#38093981 — Shubham Khatri, Jul 19 '17 at 06:11
this seems like your case https://www.tutorialspoint.com/reactjs/reactjs_refs.htm — Hana Alaydrus, Jul 19 '17 at 06:17

score 0 · Accepted Answer · answered Jul 19 '17 at 06:26

Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

According to the React Docs:

This usually means one of two things:

1. You are trying to add a ref to an element that is being created outside of a component's render() function.
2. You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured NPM dependency)

You case seems to be the first one, where you are trying to create the document object outside of your render function.

The solution would be to have a function called from the render function that returns a document object

renderInput = () => {
    return (
        <div className="form-group">
          <label className="form-label" htmlFor="target">Target</label>
          <input className="input" onChange={this.handleChange.bind(this)} ref={(ref) => this.textbox = ref} id="target" type="text" placeholder="Target" />
        </div>
    )
}
render() {
   return (
       <div>
            {this.renderInputForm()}
      </div>
   )
}

P.S. React suggests to use callback approach for refs instead of string refs. Check this answer:

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

Also in case of Invalid Refs:

Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

Can't add a ref to an object which will be reloaded by setState

1 Answers1