Q:

Why getContext function cannot be called on React JSX  object?

I have the following code in a React.Component subclass
class SearchObject extends React.Component { 

    constructor(props) {
        super(props)

        var activateCanvas = <canvas></canvas>

        var activateDraw = () => {
            let ctx = activateCanvas.getContext('2d')
            //draw stuff
        }

        activateDraw()

        this.state = {
            activate: activateCanvas
        }
    }
...

the activateCanvas.getContext('2d') line returned error, saying getContext is not a function.
I wonder why activateCanvas here is not an Element object. Do I have to wait until the element is rendered and call something like document.getElementById() to use getContext()? Thanks

A:

Yes, you need to render the react element you created first. Only then you can start referring to its DOM element. I would recommend using ref for that. Something like this should work:
function App() {

  let ctx;
  var activateDraw = (ref) => {
    console.log('this is the canvas DOM element you want', ref)
    ctx = ref.getContext('2d')
    // draw stuff
  }
  var activateCanvas = (<canvas ref={(e) => activateDraw(e)}></canvas>)

  return (
    <div className="App">
      { activateCanvas /* don't forget to put the element into your render */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
         ....

