[Solved]-How to access DOM in functional component-Reactjs

The problem is, that you're trying to access the element before it appears in the DOM (try to console.log(document.body.innerHTML) right under the React import and check what does the DOM look like at the time of calling the getElemenetById function.

If you need the element's reference you should use ref.

You are trying to get a node that has not been rendered yet.

You could use the componentDidMount lifecycle method by converting your component to a stateful (class component) one before trying to get your canvas. But keep in mind that this is considered really bad practice and should never be necessary :

componentDidMount(){
    this.canvas = document.getElementById('dial__container');
}

Another solution would imply using refs, as linked in the other answer, which are also considered a bad practice.