React input validation with onChange

Question

I have a numeric input, which I want to validate with an onChange, but when said input is cleared, react throws ReferenceError: value is not defined which is understandable - it has nothing to validate.

I'm using this approach [Answer]

I'm using functional components and here is my code snippet:

   const [formData, setFormData] = React.useState({
        userTeamChosen: "",
        eventNumber: 0,
        value: 0,
        ethValue: 0})

    function handleNumeric(event) {
        const { name, checkedValue, min, max } = event.target
        value = Math.max(Number(min), Math.min(Number(max), Number(value)));
        setFormData(prevFormData => {
            return {...prevFormData,[name]: checkedValue}})}

    <input
        type="number"
        name="value"
        value={formData.value}
        onChange={handleNumeric}
        min="5"
        max="10000000"/>

How should I change my validation, to keep in onChange, but without erroring, when the input is empty? Thanks in advance!

What is the value variable? which is getting assigned Math.max? — Tirth Trivedi
– Tirth Trivedi, Commented Jul 13, 2022 at 12:43

Mina · Accepted Answer · 2022-07-13 13:39:26Z

1

There is no a checkedValue property in the number input element, Use valueAsNumber or value instead.

function handleNumeric(event) {
    const { name, valueAsNumber, min, max } = event.target
    const result = Math.max(+min, Math.min(+max, !Number.isNaN(valueAsNumber) ? valueAsNumber : +min));
    setFormData(prevFormData => {
        return {...prevFormData,[name]: result}})}

edited Jul 13, 2022 at 13:39

answered Jul 13, 2022 at 12:47

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tyler Dill Over a year ago

You really should not be changing the formData directly (ie: formData.value) when using React useState. You should only use the function provided by useState, in this case setFormData This solution simply writes over the formData variable directly which coerces any possible NaN cases, thus hiding errors. The error is avoided because when you try to access it in the setFormData, it was already coerced. Better to check for NaN before calling setFormData.

Mina Over a year ago

Yes, I know about settingstate by setState, but I missed it because I get the code by copying and pasting, Thanks for notifying me about valueAsNumber I didn't know about it producing NaN if the input with an empty value. I just update it.

bitchwhocodes · Accepted Answer · 2022-07-13 12:45:19Z

0

Looks like you were very close to solving this one yourself :D

The only errors I noticed were the value variables not being declared or defined anywhere, to solve this I just added formData so that react would know that it's the formData's value being used and not some random value

function handleNumeric(event) {
    const { name, checkedValue, min, max } = event.target
    formData.value = Math.max(Number(min), Math.min(Number(max), Number(formData.value)));
    setFormData(prevFormData => {
        return {...prevFormData,[name]: checkedValue}})}

answered Jul 13, 2022 at 12:45

bitchwhocodes

1121 silver badge7 bronze badges

1 Comment

Nikita Kulikov Over a year ago

This solved the inital problem, but caused more errors down the line, solution below fully solved it :)

Zahra · Accepted Answer · 2022-07-13 13:05:18Z

0

You should call

 function handleNumeric(event) {
        const { name, checkedValue, min, max } = event.target
        formData.value = Math.max(Number(min), Math.min(Number(max), Number(formData.value)));
        setFormData(prevFormData => {
            return {...prevFormData,[name]: checkedValue}})}

answered Jul 13, 2022 at 13:05

Zahra

112 bronze badges

Comments

Tyler Dill · Accepted Answer · 2022-07-13 13:16:09Z

0

A number input is considered valid when empty. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number. So if you empty the input and try to check valueAsNumber it will return NaN. You can check for this case using isNaN():

    function handleNumeric(event) {
        const { name, checkedValue, min, max } = event.target
        if (isNaN(checkedValue)) checkedValue = 0;
        value = Math.max(Number(min), Math.min(Number(max), Number(checkedValue)));
        setFormData(prevFormData => {
            return {...prevFormData,[name]: checkedValue}})}

Other than that, your solution should be working fine in all other cases. Placing a required attribute on the number input may help as well since it will ask the browser to prevent users from emptying the input.

edited Jul 13, 2022 at 13:16

answered Jul 13, 2022 at 13:03

Tyler Dill

3712 silver badges8 bronze badges

Collectives™ on Stack Overflow

React input validation with onChange

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related