What is node => {this.node = node } in React

user_8689030 0
Viewed 3292

I am new in React I would like to create dropdown with outside click to close

I end up with something like 

ref={(node) => {this.node = node;}}

what does it mean can someone explain this line of code ?

reactjs
3 Answers

This is ref function, a low-level way to assign a ref. It assigns a reference to this.node property after a component or element was mounted.

A recommended way is to use:

this.nodeRef = React.createRef();

...

<Comp ref={this.nodeRef}/>

A ref becomes available as this.nodeRef.current after a component was mounted. The use of this.nodeRef object that can be passed by reference is a way to avoid some common problems that can appear with this.node.

user_37315010

The above pattern is a way for assigning refs in React to dom elements. Its known as callback pattern for refs. The callback function in called by react during render with the reference of the element being passed as a prop to the function which you then use and assign to the class variable

More more information, react the docs

user_59281860 
ref={(node) => {this.node = node;}}

Here when you define ref using the above method, the function defined is called with the instance of the component/element. i.e. node is the element over which ref attribute is defined. That instance is then saved in this.node

user_34314770
Related