by Sai gowtham

How to access the dom nodes in React using refs

In this tutorial, we will learn about how to use the ref attribute to access the dom nodes in React.

Have you seen if you open Google.com the search box is focused automatically?. The same thing we created below using ref attribute.

react ref example

We can create the ref by using the React.createRef() method.

class Search extends React.Component {
  inputText = React.createRef();
  componentDidMount() {
    this.inputText.current.focus();  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputText} placeholder="search" />      </div>
    );
  }
}

In the above code, we first invoked the React.createRef() method and passed it to the input element ref atribute.

In componentDidMount() lifecycle method we accessed that input element by using current property.

React assings the dom element to the current property whenever the component mounts, and assigns back to null when component unmounts.

We can also use ref’s inside the functional components like this.

import React from "react";

function SmallComponent() {
  const inputText = React.createRef();
  function handleFocus() {
    inputText.current.focus();  }

  return (
    <div>
      <input ref={inputText} type="text" />      <button onClick={handleFocus}>Focus</button>    </div>
  );
}

Callback refs

There is also another way to use refs by using callback functions where react passes the dom element as an argument to the callback function.

Here is an example:

class Search extends React.Component {
  componentDidMount() {
    this.inputText.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={(node) => (this.inputText = node)}          placeholder="search"
        />
      </div>
    );
  }
}

React invokes the callback function by passing a dom element when the component mounts and passes null when component unmounts.

Other example Login form

class Login extends React.Component {
  state = {
    username: null,
    password: null,
  };

  handleSubmit = (e) => {
    e.preventDefault();

    this.setState({
      username: this.refusername.value,
      password: this.refpassword.value,
    });
  };
  render() {
    return (
      <form>
        <input type="text" ref={(name) => (this.refusername = name)} />
        <input type="password" ref={(pass) => (this.refpassword = pass)} />
        <button onClick={this.handleSubmit}>Login</button>
      </form>
    );
  }
}

Note: ref updates happen before componentDidMount() and componentDidUpdate() life cycle methods.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY