I am trying to catch an element using an ID in React, but I could not.

render() {
  //Looping through all menus
  let menuOptions = this.props.menuLists.map(menuList => {
    return (
      <li className="nav-item active" key={menuList.name}>
        <a className="nav-link" href={menuList.anchorLink}>
          {menuList.name}
        </a>
      </li>
    );
  });

  return (
    <React.Fragment>
      <div id="animSec">
        <canvas id="myCanvas" />
      </div>
    </React.Fragment>
  );
}

I want to call the myCanvas ID.

I tried by this.refs, but it's sent me undefined. I also tried react-dom:

ReactDOM.findDOMNode(this.refs.myCanvas);

but get nothing. I call findDOMNode on the constructor first and I tried ponentDidMount but get nothing.

I am trying to catch an element using an ID in React, but I could not.

render() {
  //Looping through all menus
  let menuOptions = this.props.menuLists.map(menuList => {
    return (
      <li className="nav-item active" key={menuList.name}>
        <a className="nav-link" href={menuList.anchorLink}>
          {menuList.name}
        </a>
      </li>
    );
  });

  return (
    <React.Fragment>
      <div id="animSec">
        <canvas id="myCanvas" />
      </div>
    </React.Fragment>
  );
}

I want to call the myCanvas ID.

I tried by this.refs, but it's sent me undefined. I also tried react-dom:

ReactDOM.findDOMNode(this.refs.myCanvas);

but get nothing. I call findDOMNode on the constructor first and I tried ponentDidMount but get nothing.

• javascript
• reactjs

• Possible Duplicate of How to access a DOM element in React? What is the equilvalent of document.getElementById() in React – Shubham Khatri Commented Dec 20, 2018 at 5:07
• 1 Possible duplicate of How to access a DOM element in React? What is the equilvalent of document.getElementById() in React – Agney Commented Dec 20, 2018 at 5:07
• did u people read the question or just wait to mark it ..... i mention i tried on stack overflow ans but that not give me any solution. plz read first then mark it as a duplicate. – sayalok Commented Dec 20, 2018 at 5:13
• @sayalok Please define a ref on canvas to access it via a ref. Thats the reason its not working. – Shubham Khatri Commented Dec 20, 2018 at 6:00

3 Answers 3

You can use Callback Refs to retrieve the ID:

class YourComponent extends React.Component {
  constructor(props) {
    super(props)
    this.canvas = null
  }

  ponentDidMount() {
    console.log(this.canvas.id) // gives you "myCanvas"
  }


  render() {
    return (
      <React.Fragment>
        <div id="animSec">
          <canvas id="myCanvas" ref={c => {this.canvas = c}}></canvas>
        </div>
      </React.Fragment>
    )
  }
}

alternatively, for React v16.3+, you can use createRef():

constructor(props) {
    super(props)
    this.canvas = React.createRef()
  }

  ponentDidMount() {
    console.log(this.canvas.current.id) // gives you "myCanvas"
  }


  render() {
    return (
      <React.Fragment>
        <div id="animSec">
          <canvas id="myCanvas" ref={this.canvas}></canvas>
        </div>
      </React.Fragment>
    )
  }

If you set up a ref in your constructor as this.canvasRef = React.createRef() and apply it to your canvas as

<React.Fragment> 
  <div id="animSec">
    <canvas ref={this.canvasRef}></canvas>
  </div>
</React.Fragment>

You should be able to access the element directly. You can console log or check your dev tools to view the ref value. And (to my best knowledge), it's best practice to use Refs pared to querySelectors in React. You might also check out this post to see if you can work around with a method on canvas.

You can try using document.getElementById('myCanvas') in a custom function or any life cycle method to target the desired element.
Note that this doesn't work if you're doing SSR with a framework like next.js because there is no document object in the server.