score:1
remove useeffect
hook, the dependency for the hook is num
and inside the callback of useeffect
num is once again updated with setnum
. this is a big no-no.
i suggest following changes to the handlechange
callback
function handlechange(evt) {
const value = evt.target.value;
const inputelements = document
.getelementbyid("app")
.getelementsbytagname("input");
let numberofinputelements = 1;
if (numberofinputelements !== null) {
numberofinputelements = inputelements.length - 1;
}
setnum((inputnum) => {
for (const key in inputnum) {
if (inputnum.hasownproperty(key)) {
inputnum[key] = value / numberofinputelements;
}
}
return { ...inputnum, [evt.target.name]: value };
});
}
link to codesandbox for complete code.
but i understand your requirement is slightly different from the problem statement.
Source: stackoverflow.com
Related Query
- split a number by total number onChange input
- React input type number onChange is slow
- How to link input type number value with onChange React
- React JS - input onChange event not setting phone number as valid until 1 extra character typed
- Typescript input onchange event.target.value
- React: trigger onChange if input value is changing by state?
- Only numbers. Input number in React
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- React input onChange lag
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- Initializing React number input control with blank value?
- Number input is string not integer in React
- Get invalid value from input type number
- ReactJs prevent e and dot in an input type number
- React input onChange won't fire
- Radio Input onChange only fires once?
- TypeScript & React - one onChange Handler for multiple input fields
- Typescript & React Component that accepts onChange for both TextArea and Input
- React: Number input with no negative, decimal, or zero value values
- React input type file onChange not firing
- Number with decimal input in React?
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- Can I set an input field to readonly in React while keeping my onChange function?
- Hidden input doesn't trigger React's onChange event
- How to make React input onChange set state only after onChange stops firing for set time?
- redux-form: trigger Form onSubmit after Input onChange
- React change input value onChange
- How to Remove Arrow on Input type Number with Tailwind CSS
- React Formik does not work with number input
More Query from same tag
- Spotify API Error. 401 Permissions missing. When Attempting to Play Track
- Mobx, How is `@action` handled using the callback function
- Typescript syntax: calling a function with < >
- Using components from an external directory in a Electron project with Webpack
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- How to fix `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js
- Injecting dependencies in <head> vs package.json
- can't pass props using Link in react router dom
- Localhost react app not receiving cookie from Heroku hosted node API
- using links in react-i8next
- Passing props in react - fetching
- Redux toolkit running multiple queries even with preventing it
- Formik & Yup - How to make a schema for an array and string
- get scss from design tokens json file using style dictionary
- setState of an object - React Native
- Typescript issue after updating to create-react-app 4.0.0
- create react app : configure Jest : Run all test files
- react-router vs react-router-dom, when to use one or the other?
- What's the correct way to make the uploaded image file accessible via URL - google drive api v3
- What are some GraphQL schema naming best practices?
- Always get undefined when using Yup.array().when() with two arrays
- Not showing image upload field in react
- React state always return initial value
- Move content left and right to follow Drawer open / close (Material-UI)
- Can I share a component instance across multiple trees in React?
- How can I make the text area empty after I click the submit button?
- When using antd table, with checkbox selection, the checkbox is cleared
- Using Ionicons 5 in Laravel React Application
- React JS upload audio from local machine and play in browser
- How to control React Re-Renders with data coming from context