How to access more than one element of Dom in react using React.createRef()

Question

I know how to access single element of dom using React.createRef().But I want to access two different element using createRef. I have seen some example on stackoverflow for accessing multiple elements dynamically but unable to understand.I am attaching here my simple code where I want to change the background color of span tag onClick of button. I followed this by react Docs. Can someone please guide me, what I am doing wrong here.

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    // this.myRef = React.createRef();
    this.textInput = null;

    this.state = {
      fname:""
    }
  }

  setTextInputRef = element => {
    console.log("element",element);
    this.textInput = element;
  };

green = () =>{
  console.log("green ",this.textInput);
  /*   this.textInput.current.style.backgroundColor = "green"; */
  this.textInput.style.backgroundColor = "green";
}

red = () =>{
  console.log("red ",this.textInput);
  /*   this.textInput.current.style.backgroundColor = "red"; */
  this.textInput.style.backgroundColor = "red";
}

  render() {
    return (
      <div>
      {/* 
      <span id="green" ref={input => { this.setTextInputRef = input; }}>Green</span><br/>
      <span id="red" ref={input => { this.setTextInputRef = input; }}>Red</span><br/> 
      */}
      <span id="green" ref={this.setTextInputRef}>Green</span><br/>
      <span id="red" ref={this.setTextInputRef}>Red</span><br/>
      <button onClick={this.green}>For Green</button><br/>
      <button onClick={this.red}>For Red</button><br/>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

In above code If user click on btn than respective span color should be change.

Any help will be appreciated.

here is jsfiddle for more info

Why are you not setting state on button click, and passing the style as a prop to the ``s? DOM referencing is the last resort in reactive programming. — moonwave99, May 09 '20 at 10:59
Actually I am looking for how can we access more than one element using creareRef. — Kanekar, May 09 '20 at 11:02

score 0 · Accepted Answer · answered May 09 '20 at 11:20

You can create multiple refs within your constructor if the elements rendered are static and access the elements using this.myRef.current

Your code with createRef would look like below

import React from "react";
import "./styles.css";

export default class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.greenInputRef = React.createRef();
    this.redInputRef = React.createRef();
    this.state = {
      fname: ""
    };
  }

  green = () => {
    console.log("green ", this.textInput);
    /*   this.textInput.current.style.backgroundColor = "green"; */
    this.greenInputRef.current.style.backgroundColor = "green";
  };

  red = () => {
    console.log("red ", this.textInput);
    /*   this.textInput.current.style.backgroundColor = "red"; */
    this.redInputRef.current.style.backgroundColor = "red";
  };

  render() {
    return (
      <div>
        {/* 
      <span id="green" ref={input => { this.setTextInputRef = input; }}>Green</span><br/>
      <span id="red" ref={input => { this.setTextInputRef = input; }}>Red</span><br/> 
      */}
        <span id="green" ref={this.greenInputRef}>
          Green
        </span>
        <br />
        <span id="red" ref={this.redInputRef}>
          Red
        </span>
        <br />
        <button onClick={this.green}>For Green</button>
        <br />
        <button onClick={this.red}>For Red</button>
        <br />
      </div>
    );
  }
}

Working Demo

If you are rendering code snippet dynamically by looping over it, you can create ref in the below manner

constructor(props) {
   super(props);

   props.data.forEach(item => {
      this[`dataRef${item.id}] = React.createRef();
   })
}  

...
render() {
   return (
       <div>
        {
           data.map(item => 
              <p ref={this[`dataRef{item.id}]}>{item.name}</p>
           )
         }
       </div>
   )
}

Thanks @Shubham really appreciate for your time.I have doubt Is it a right approach to create multiple instance of React.createRef() for every dom element if I want more than two or three for static element? or this is the only approach for static elements rendering. — Kanekar, May 09 '20 at 11:51
You do need to create as many refs as the components you want to access. There is no other alternative to accessing elements keeping in mind virtual DOM. However you must avoid refs as much as possible — Shubham Khatri, May 09 '20 at 11:52

How to access more than one element of Dom in react using React.createRef()

1 Answers1