score:1
Accepted answer
you should not be reaching into the dom to set the transform. you should remove the queryselector line from your input.
<input
type="number"
max={359}
value={value}
onchange={(e) => {
setvalue(e.target.value);
// don't do this 👇
document.queryselector("h1").style.transform = `rotate(${value}deg)`;
}}
/>
the state change will trigger a re-render, so just set the transform during render:
<h1
style={{
transform: `rotate(${value}deg)`,
border: "1px solid pink",
display: "inline",
padding: "10px"
}}
>
Source: stackoverflow.com
Related Query
- Previous state in a useState functional component
- How to isolate state among different instances of functional component that uses useState hook?
- How to correctly set state in a loop in react functional component using useState
- Is their a functional form of updating state using useState hook that contains updated props along with previous state?
- Accessing the previous state of a functional component with state being an object
- Calling a state update function within a state update function - useState hook in React Functional component
- Multiple calls to state updater from useState in component causes multiple re-renders
- Set state when testing functional component with useState() hook
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- useState hook, setState function. Accessing previous state value
- React useState - using one State per component vs multiples states?
- How to initialize the react functional component state from props
- Updating Parent Component State from Child Component with UseState React Hook
- Warning: Can't perform a React state update on an unmounted component. In a functional component
- React functional component using state
- functional component set useState in conditional function
- How to test the state of a functional component in React with Jest (No Enzyme)
- react is not updating functional component state on input change
- Conditionally setting className based on a state variable in a React functional component
- React useState giving previous state value always
- Too many re-renders. React limits the number of renders to prevent an infinite loop. Updating state of a functional component inside the render method
- How to dynamically set state with onChange event handler in a functional component
- React UseState - using previous state vs not using previous state
- state variable has wrong value in functional component
- Set state on form submit in a functional component
- useState function is not working in functional component
- Reactjs update state after call component in functional component
- functional component is not re-rendering after state change in React
- Reading component state just after setting when using useState hook in react
- React.js useState with Array.push method on functional component
More Query from same tag
- React-slick - how to change custom arrow colour based on the page number
- SyntaxError in Webpack / React.js Unexpected token = { } in React
- useCallback dependencies for array of items
- How to replace a form with a component after submit
- String contains an invalid character when running gatsby develop
- Why react-validation hasErrors issue
- Use imported variables in jest mock function
- How can I create view more and make my word stand in same line?
- Partially change text color in Select (Ant Design)
- How to solve, craco: *** Cannot find ESLint loader (eslint-loader). *** error with ANTd and React (2021)
- All checkbox are checked upon clicking
- The response from API is undefined
- Way to check if first iteration in map
- React not redirecting after first login. But redirects after forcefully redirecting and doing a login action again
- Where do I put static files in my React.JS app?
- The following versions are almost identical, so why does only one work?
- ReactJs development on docker container
- P5js lags when changing components (with React)
- Conditionally remove props from component
- Access user admin informations in Firebase (ReactJS / Firebase Custom Claims)
- Spread for an object in React
- React Object Entries Renders Nothing
- Async function returning undefined variable
- How to prevent useEffect re-rendering twice
- React ES6 components are not re-rending
- How to write an interceptor for react router?
- TypeError: Cannot destructure property 'products' of 'productList' as it is undefined
- Using Array.map in react.js
- Cant figure out how to create a 'basic' HOC for a react / NextJS application
- webpack: ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' .jsx