score:1
Accepted answer
well what you can do is make the number inputs controlled by storing their values in the store:
state = {
// other state,
inputs: {}
}
then in onchangehandler
set the value of each input in the state:
function onchangehandler(e) {
const { name, value } = e.target;
this.setstate({
inputs: {
...this.state.inputs,
[name]: value
}
})
}
then when your form is submitted you can add a check to see if the values are unique or not, there are many ways to do that, what i'm doing here is remove the duplicates from the array and then check the length of the array against the values in the state like this:
function handleseedingsubmit(e) {
e.preventdefault();
const { inputs } = this.state;
const valuesinstate = object.values(input);
const uniquevaluesarr = [...new set(valuesinstate)];
const areinputsvalid = valuesinstate.length === uniquevaluesarr.length;
if (!areinputsvalid) {
// set error here
return;
}
// hurray!! inputs are valid
// handle success case here
}
hope it helps :)
Source: stackoverflow.com
Related Query
- React JS: Ensure Progratimacally created input fields are unique from each other
- How to get form data from input fields in React
- React updating state in two input fields from form submission
- How action and reducers are connected with each other in react redux
- How to get useForm data in react component when input fields are in child component?
- Warning: Each child in a list should have a unique "key" prop. with input - react
- How to Reset the dropdown values on form submission, Other Input values are getting Cleared in React Hooks
- In React JS, how to get value from multiple input fields when one of them is changed
- React child components are only half updating when switching from one to the other
- When clicking on any other tabs, React tabs reset/clears all form input fields
- How to send info from a reusable input to the other components in React
- Disable submit button in React functional component if all input fields are not completed
- show input field when other option is selected from select box using ionic react
- How can i restrict user from not selecting other file types using input type file with react and typescript?
- React Native app created with init not working if i moved from one folder to other
- How can I access the text input fields when using express-fileupload from react
- error messages under the relevant input fields automatically from Django Rest API by react hooks
- Move focus from one input to other input in react js when max length is full of first input
- Calculate total price by listening to change events on other input fields react js
- objects are not valid as a react child (found object with keys) while passing props from one component to other
- Setting the state of a React Component from 2 input fields
- is it possible to get multiple input from the input field which is created dynamically in react js?
- All value fields are changing to the same value if I change one input in react
- Create an array from two input fields in React
- React - 2 input field dependent on each other - infinite loop
- Where to import other React component from if you are importing for Reacr component?
- React read input values from multiple input text fields
- Why do new objects are created on each React render?
- Why are other images from media library displaying in react native / expo project?
- Store data in array from input fields in React
More Query from same tag
- defaultAnnotations Prop only working when I hard-code the data - React Annotation Tool
- How to define function conditionally
- TypeScript: Interface cannot simultaneously extends two types
- Passing custom data in List in react-admin
- problem with routing after deploying mern app to heroku
- CompondentDidMount Failed propType- define fetch as a var
- Put an image/SVG/logo at the top corner of a text (Using react.js)
- Getting axios response if Node server sends status 400
- React Testing Library: When to use userEvent.click and when to use fireEvent
- react js and redux sending a api call before each route
- How to display array element bu opening modal?
- Decode Jwt token React
- Secure User Registration with ReactJS and Django REST
- Cannot GET "/About" with react-router v4 (Production Help)
- How to use a Phoenix controller variable in JavaScript?
- react-select: Overwrite default styles and remove the clearable 'x' icon
- Sending Request to Server (File) Using ReactJS and Laravel
- Casting dates properly from an API response in typescript
- Refreshing children state from parent React
- Make a div on top of all the others
- React in-memory Portal
- Rest API get call - put data in array - with typescript and react
- why do we use curly braces while defining constant variable in react js?
- Why do I need to use Context or a Provider with MobX?
- List doesn't render on first click
- How to import images into CSS Modules?
- How would i insert a mp4 as a background in react js
- Table rows wrapped in an enclosing tag
- I am trying to get data from my backend using axios, but its showing Network error
- Approach for useEffect to avoid exhaustive-dep warning