current is always null when using React.createRef

Question

I was trying to do this.

I must be missing something, but I don't understand why current is always null in this example.

class App extends React.PureComponent {   constructor(props) {     super(props);     this.test = React.createRef();   }   render() {     return <div className="App">current value : {this.test.current + ""}</div>;   } } 

You can check my test case here

Answer 1

Because you forgot to assign the ref to some dom element. You are only creating it.

Write it like this:

class App extends React.PureComponent {   constructor(props) {     super(props);     this.test = React.createRef();   }    handleClick = () => alert(this.test.current.value)    render() {     return (       <div className="App">         <input ref={this.test} />         <button onClick={this.handleClick}>Get Value</button>       </div>     )   } } 

Working Example.

Answer 2

I know this is not the solution to OP's problem but for those who are coming from google search, one of the ways the ref.current can be null is that if the component on which the ref is being attached is a connected component. Like with react-redux connect or withRouter. For react-redux the solution is to pass forwardRef:true in the fourth option to connect.