Accessing DOM elements in React JS day#7

Hello, guys welcome back today. In the previous article, we see a handling event in react. In this, we going to see how to access the DOM in react. so let’s get started.

  1. Introduction to react js
  2. Hello world in React JS day#1
  3. Components in React JS day#2
  4. Add style to components in React JS day#3
  5. State in React JS day#4  
  6. Props in React day#5
  7. Handling events in React JS day#6
  8. Accessing DOM elements in React JS day#7
  9. Conditional rendering in React JS day#8
  10. Adding logic to the game part-1 day#9
  11. Adding logic to the game part-2 day#10

Accessing DOM elements

Let take our Register component. In the previous article, we add an event listener to the register button.
In this article, we going to add functionality to access the player who entered the name on the input box.

After the player press the register button.The thing we need to do are

  1. Access the Input DOM node of the input box.
  2. Read the user-entered value from that.
  3. Store that on the state variable.

1.Access the Input DOM node of the input box

To access the DOM node react has Refs (reference). Refs are created using React.createRef() and store the instance of ref in an instance variable.

this.input_ref=React.createRef();

After creating the ref attach the ref to react elements by

<input type="text" placeholder="Enter the player name.." className="player_name" ref={this.input_ref}/>

2.Read the user-entered value from that

After the elements are rendered the DOM node of the element is accessible through this.myref.current. By using this we can play around with the DOM node of the element.

For our use case we only need to read the user-entered text so use this.myref.current.value this will return the player entered value.

let name=this.inputref.current.value;

Before store that value makes sure that the value is not empty by using the if condition.

Let see the whole code.

Register.js

import React from 'react'; 
import "./Register.css";

//we importing the player component 
import Player from "./Player.js";

class Register extends React.Component 
{ 
  constructor(props) 
  {
   super(props); 
   //at initial the player name is set as empty
   this.state={player_name:""} 
   //creating ref
   this.inputref=React.createRef();
   
   this.setPlayer=this.setPlayer.bind(this);
  } 

  setPlayer(event)
  {

    let name=this.inputref.current.value;
    if(name)
    {
      this.setState({player_name:name});
    }
  }

  //return the input box and register button 
  render() 
  { 
    return( 
      <div> 
          <div className="register_container"> 
            <input type="text" placeholder="Enter the player name.." className="player_name" ref={this.input_ref}/>
            <input type="button" value="Register" className="reg_button" onClick={this.setPlayer}/> 
          </div> 
          <Player player_name={this.state.player_name}/> 
      </div> 
                      ); 
  }
}

Player.js

import React from 'react';

class Player extends React.Component 
{ 
  constructor(props) 
  { 
    super(props); 
  } 
  render() 
  { 
    return( 
      <div> 
               <p>{this.props.player_name}</p>
      </div> 
          ); 
  } 
}

Save the code and run our program you will output similar to the below image.

Conclusion

Ok guys that’s enough for today. We learn about how to access DOM elements in react in this article. In the next article, we learn conditional rendering in react.

All the best guys for upcoming days keep learning.

Leave a Reply

Your email address will not be published. Required fields are marked *