Tags

.NET

Reason behind using refs instead of ID in React JS

Let's start with id attribute in React JS and here we have used id attribute to access one of the elements in a React Component. In this IdComponent component, we are performing the following operations:

  • When a user focuses on a text field, it will change the border-color to blue and backgroun-color to light black.
  • When a user blurs out of the text field, it will reset the border-color and border-color to initial stage.

IdComponent.js

This is an IdComponent component, where we are using id attribute.

import React from 'react';
import './style.css';

class IdComponent extends React.Component {
   onFocus() {
     document.getElementById("myInput").setAttribute("class", "highlight");
   }

onBlur() {
   document.getElementById("myInput").setAttribute("class", "");
}

render() {
      return (
        <div>
          <input
           id="myInput"
           onFocus={this.onFocus.bind(this)}
           onBlur={this.onBlur.bind(this)}
           />
         </div>
       );
     }
}
export default IdComponent;

style.css

This is the related stylesheet for the same.

input {
     padding: 10px;
     border: solid 2px #bdc7d8;
     display: block;
     width: 500px;
     margin-top: 10px;

}
.highlight {
     border: solid 2px #00f;
     background-color: #e5e5e5;
}

index.js

This helps to render the IdComponent component into a root DOM node.

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import IdComponent from './demoOnRefAndID/IdComponent';

ReactDOM.render(
     ,
     document.getElementById('root')
);


registerServiceWorker();

Let's see the output for id attribute below and Tap the input field the text field to see the change.
 

Reusability Problem

You'll encounter a problem, when you are using same component more than once. Here's a demo of reusability issue with id attribute, when you try to create that same component multiple times. Tap through the input fields to see what happens. Here we have created multiple objects with the same ID, which is a crime as per HTML standards.

NOTE: id attribute works on a single element in whole DOM tree.

To overcome this animation issue, always use Ref instead of ids.
 

Solution is using ref

This component using ref attribute to overcome above issue.

RefComponent.js

This is a RefComponent component, where we are using ref attribute.

import React from 'react';
import './style.css';

class RefComponent extends React.Component {
   onFocus() {
     this.myInput.setAttribute("class", "highlight");
}

onBlur() {
   this.myInput.setAttribute("class", "");
}

render() {
   return (
     <div>
      <input
        ref={input => {
          this.myInput = input;
         }}
          onFocus={this.onFocus.bind(this)}
          onBlur={this.onBlur.bind(this)}
         />
       </div>
      );
    }
   }
export default RefComponent;

style.css

This is the related stylesheet for the same.

input {
     padding: 10px;
     border: solid 2px #bdc7d8;
     display: block;
     width: 500px;
    margin-top: 10px;

}
.highlight {
     border: solid 2px #00f;
     background-color: #e5e5e5;
}

index.js

This helps to render the RefComponent component into a root DOM node.

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import RefComponent from './demoOnRefAndID/RefComponent';

ReactDOM.render(
     ,
     document.getElementById('root')
);
registerServiceWorker();

Let's see the final output:

So, If you are using id attribute in your application, then change it to ref attribute.

Thanks to Praveen Kumar for being our guest writer this week.

 

Back to Blog

</Follow Us>