How to properly implement getElementByID in React?

Question

Im attempting to execute Chart js functions in React, but have received errors at every point where 'getElementByID' is used, which says 'null is not an object'. I'm assuming that 'getElementByID' is supposed to be formatted a different way in React, but I haven't been able to find a fix for the errors. Does anyone know how I would format the following lines below to be used in React?

let mathChart = document.getElementById('mathChart').getContext('2d');
. 
.
document.getElementById("houseTemp").innerHTML = "$" + currentTemp;

Also they're inside a function that I import to the main js file, perhaps there can be a problem with the way i'm calling them?

For CharJs in react use `https://github.com/reactjs/react-chartjs` — navnath, Sep 06 '21 at 11:35
Also you can check i`https://stackoverflow.com/questions/32423528/getting-typeerror-document-getelementbyid-is-null-when-using-react-js-wi` — navnath, Sep 06 '21 at 11:41

score 1 · Answer 1 · answered Sep 06 '21 at 11:50

You can do that by specifying the ref

EDIT: In react v16.8.0 with function component, you can define a ref with useRef. Note that when you specify a ref on a function component, you need to use React.forwardRef on it to forward the ref to the DOM element of use useImperativeHandle to to expose certain functions from within the function component

const Child1 = React.forwardRef((props, ref) => {
return <div ref={ref}>Child1</div>  });

const Child2 = React.forwardRef((props, ref) => {
const handleClick= () =>{};
useImperativeHandle(ref,() => ({
   handleClick
   }))

  return <div>Child2</div> 
 });

 const App = () => {
 const child1 = useRef(null);
 const child2 = useRef(null);

return (
    <>
       <Child1 ref={child1} />
       <Child1 ref={child1} />
    </>
   )
 }

https://reactjs.org/docs/refs-and-the-dom.html

Please add further details to expand on your answer, such as working code or documentation citations. — Community, Sep 06 '21 at 12:14

score -2 · Answer 2 · answered Sep 06 '21 at 11:43

-2

gcloud asset export
--content-type CONTENT_TYPE
--project 'PROJECT_ID'
--snapshot-time 'SNAPSHOT_TIME'
--bigquery-table 'BIGQUERY_TABLE'
--output-bigquery-force

answered Sep 06 '21 at 11:43

Joseph Davis

1

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Community Sep 06 '21 at 12:52

How to properly implement getElementByID in React?

2 Answers2