0

I'm getting this error it a basic react-rails based app.

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

Here is the component code where the refs are.

var NewItem= React.createClass({
    handleClick() {
        var name    = this.refs.name.value;
        var description = this.refs.description.value;
        $.ajax({
            url: '/api/v1/items',
            type: 'POST',
            data: { item: { name: name, description: description } },
            success: (response) => {
                console.log('it worked!', response);
            }
        }); 
    },
    render() {
        return (
                <div>
                    <input ref='name' placeholder='Enter the name of the item' />
                    <input ref='description' placeholder='Enter a description' />
                    <button onClick={this.handleClick}>Submit</button>
                </div>

        )
    }
});

The error suggests either that the ref was not created inside a component, which it appears to be or multiple copies of React have been loaded which I don't think is possible as I am only using the react-rails gem.

If anyone knows what is causing this error I'd appreciate the help. Thanks in advance!

Sebastián Palma
  • 32,692
  • 6
  • 40
  • 59
mikeym
  • 5,705
  • 8
  • 42
  • 62
  • Possible duplicate of [React Error (Only a ReactOwner can have refs.)](https://stackoverflow.com/questions/37663175/react-error-only-a-reactowner-can-have-refs) – btzr Jul 28 '17 at 04:48
  • What is your setup? are you using webpacker? – btzr Jul 28 '17 at 18:59

0 Answers0