El motivo del error es que el elemento aún no existe cuando lo busca. Podría "arreglar" eso con una devolución de llamada useEffect o useLayoutEffect , pero ese no sería el enfoque de React. Se llamará a su componente para que se vuelva a renderizar cuando cambien los accesorios, así que maneje el renderizado en el nuevo estado directamente:

 const MyProgressBar = ({value}) => { return ( <div class="progress"> <div class="color" style={{width: value + "%"}}></div> </div> ); };

Esto también tiene la ventaja de que puede tener varias instancias de MyProgressBar en la página al mismo tiempo.

Ejemplo en vivo:

 const {useState, useEffect} = React; const MyProgressBar = ({value}) => { return ( <div className="progress"> <div className="color" style={{width: value + "%"}}></div> </div> ); }; const App = () => { const [bar1, setBar1] = useState(0); const [bar2, setBar2] = useState(0); useEffect(() => { const t1 = setInterval(() => { setBar1(b1 => { if (b1 < 100) { ++b1; return b1; } clearInterval(t1); return b1; }); }, 200); const t2 = setInterval(() => { setBar2(b2 => { if (b2 < 100) { ++b2; return b2; } clearInterval(t2); return b2; }); }, 400); }, []); return <div> <div> Every 200ms: <MyProgressBar value={bar1} /> </div> <div> Every 400ms: <MyProgressBar value={bar2} /> </div> </div>; }; ReactDOM.render(<App/>, document.getElementById("root"));

 .color { background-color: blue; height: 100%; } .progress { height: 1em; }

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Este código se ejecuta antes de que haya algo en el DOM.

Puede usarlo dentro de un useEffect, ejecutándose después del renderizado.

 useEffect(() => { const value = props.value const progressbar = document.getElementById("hello"); progressbar.style.width = value + "%"; }, [props.value]);

También puedes usar useRef

Su document.getElementById se ejecuta antes de la representación real, por lo que no pudo encontrar ningún elemento con esa identificación

No se recomienda usar document.getElementById en su código Reactjs, use useRef en su lugar:

 function App() { const divRef = React.useRef(); React.useEffect(() => { console.log(divRef.current); }, []); return ( <div class="progress"> <div ref={divRef} id="hello" class="color"></div> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>