0
votes
    <input
      type="text"
      ref={(input) => { this.textInput = input; }} />

That's from the React Docs on Refs. I'm new to using refs and I'm curious about the use of the curly braces after the arrow notation inside the ref. What is that callback returning exactly? Normally when I see curly braces after an arrow function, you need an explicit return statement.

2

2 Answers

2
votes

It's not returning anything. It's assigning the reference to this.textInput. You can omit the curly braces if you like, it won't make a difference. But the presence of the braces helps to signal that it's the side effect of the function that's important, not the return value.

0
votes
ref={(input) => { this.textInput = input; }}

is basically equivalent to:

ref={(function (input) {this.textInput = input;}).bind(this);}