Stateless function components cannot be given refs

javascript reactjs mobx
dagatsoin picture dagatsoin · Jul 27, 2016 · Viewed 12.5k times · Source

I try to access some refs in my component. But I have this error in the console. withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref will fail.

Here is my component:

class RegisterForm extends React.Component {

  render() {
    return (
      <form action="">
        <FormInputText ref="pseudo"  type="text" defaultValue="pseudo"/>
        <input type="button" onClick={()=>console.log(this.refs);} value="REGISTER"/>
      </form>
    );
  }
}

Plus when I click on the button I got Object {pseudo: null}in the console. I would expect an object instead null.

I am not sure to understand why this is not working. Note that my react tree uses mobx-react.

Answer

Alik picture Alik · Jul 27, 2016

Refs do not work with stateless components. It is explained in the docs

Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component.

Stateless components at the moment of writing actually have instances (they are wrapped into classes internally) but you can not access them because React team is going to make optimizations in the future. See https://github.com/facebook/react/issues/4936#issuecomment-179909980

Related questions

Can't call setState on a component that is not yet mounted

this is the first time I face this warning message. Can't call setState on a component that is not yet mounted. Follows: This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state …

Read More
How to inject mobx store into a stateless component

I am using mobx and react in a web application and I want to find a way to pass mobx store state to a stateless component. Below is my current component source code: import React from 'react'; import Panel from …

Read More
How to connect state to props with mobx.js @observer when use ES6 class?

Let's take a class like this in an app with React and React Router. @observer class Module1 extends React.Component { constructor (props) { super(props); //... } componentWillMount(){ //... } method(){ //... } otherMethod(){ //... } render() { return ( <ChildComp bars={this.props.bars}/>} ); } } And let's take a …

Read More