In my React application, I have a useEffect that checks if an element has the display style none set to it. If it does then it should set the state to false, however it always comes back as undefined. const [testingProp, setTestingProp] = useState(); useEffect(() => { const styles = getComputedStyle(customerPropertyTypeSection.current); if (styles.display == ‘none’)… Read More React useState hook always comes as undefined when setting it in useEffect

I’m storing a reference to an image item using: const renderedImageRef = useRef(). The ref is then assigned in render() function using: <img ref={renderedImageRef} src=… /> In another JSX item below, I try to access renderedImageRef.current.clientHeight using: <div style={{top: `${renderedImageRef.current.clientHeight}px`}}>Hello world</div> but this produces an error in the console: Uncaught TypeError: Cannot read properties of… Read More useRef not allowing to access .current.clientHeight

import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { const [minus, setMinus] = useState(1); const ref = useRef(null); const handleClick = () => { setMinus(minus – 1); }; console.log("–>", ref.current, minus); useEffect(() => { console.log(`denp[minus]>`, ref.current); }, [minus]); return ( <div className="App"> {(minus >= 0 ||… Read More How does React update ref?

I made a custom Checkbox component to handle events differently, code below: const DoubleClickCheckbox = ({ filter, handleDoubleClick, handleSingleClick }: DCCheckboxProps) => { const delay = 400; const timer = useRef(null); const classes = useStyles(); const flags = useFlags(); useEffect(() => { return () => { timer.current && clearTimeout(timer.current); }; }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment… Read More Typescript and useRef hook causing type error

I want to use useRef inside useeffect hook on component first mount, after that i would like to press a button to load other content besides that, on user click. My current implementation I get error that says Error: Objects are not valid as a React child (found: [object HTMLDivElement]). Which does not make sense… Read More How to use useRef on mount

I am fairly new to React and struggling to get a JS object to render through useRef and useEffect. The JS render method is as follows: import { Compass } from "steelseries"; const compass = new Compass(document.querySelector("#myCanvas"), { size: 200 }); Using a template for rendering a chart from chart.js I have tried to render… Read More React useRef / useEffect HTMLCanvasElement not assignable