add ref to component react code example

Example 1: when to use react ref

WHEN TO USE REACT'S REF ATTRIBUTE?
But it is not always a good idea to use the ref attribute. The general rule of thumb is to avoid it. The official React documentation mentions three occasions where you can use it because you have no other choice.

Managing focus, text selection, or media playback.
Integrating with third-party DOM libraries.
Triggering imperative animations.

Example 2: cre&atRefs react js

const node = this.myRef.current;

Example 3: use ref in component reactjs

function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // Ça ne fonctionnera pas !
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}

Example 4: use ref in component reactjs

class CustomTextInput extends React.Component {  // ...
}

Example 5: use ref in component reactjs

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();  }
  render() {
    return <div ref={this.myRef} />;  }
}