React Ref

Ref is just a way to manipulate the DOM just in a similar manner as jQuery.
Simple example:


import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }
  focusTextInput() {
    this.myRef.current.focus();
    this.myRef.current.value = "WORLD";
  }
  render() {
    return (
      <div>
        <div>HELLO</div>
        <div>
          <input type="text" ref={this.myRef} />
        </div>
        <div>
          <button onClick={this.focusTextInput}>Focus!</button>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);