Validate phone number on React.js

Question

I'm trying to validate the phone field, to get all letters and dots with the code below.

validatePhone = () => {
        const sanitizedPhone = this.state.phone.replace(/\D/g, '');
        if (sanitizedPhone.length >= 10 && sanitizedPhone.length <= 11) {
            this.setState({ phone: sanitizedPhone });
            return true;
        }
        toast.error('Invalid phoneNumber.', {
            position: "top-center",
            autoClose: false,
            closeOnClick: true,
        });
        return false;
    }

When i trying console.log(sanitizedPhone) with dots in input like 11.97.4.4.51234 i get 11974451234 but after this, on console.log(this.state.phone) i get the older number 11.97.4.4.51234

setState doesn't always update instantly. Console.log in you render method. — its4zahoor
– its4zahoor, Commented Dec 26, 2019 at 18:23
You're using arrow function so this inside it would have the same value just as before you assigned it. — awran5
– awran5, Commented Dec 26, 2019 at 18:51
@LuizHenrique then please share complete relevant code or codesandbox. either you input field is not bind with state or your form data is not updating. — its4zahoor
– its4zahoor, Commented Dec 28, 2019 at 9:49

Morta1 · Accepted Answer · 2019-12-26 19:12:35Z

2

From react docs:

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

This is why you don't see your change right after you're using setState.

answered Dec 26, 2019 at 19:12

Morta1

6197 silver badges20 bronze badges

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

6 Comments

Luiz Henrique Over a year ago

So what's the best way to handle this phone data and play at State?

Morta1 Over a year ago

what would you like to do with the sanitized phone number? can you provide more code of what you're trying to do? you can use this codesandbox.io/s/youthful-microservice-kqxcx

Luiz Henrique Over a year ago

Since my country has some numbers with the 9 digit in front of the number, such as 11 95879-5791 or 11 8597-1346, I am trying to avoid having space, period or comma in the form.

Morta1 Over a year ago

@LuizHenrique I created this sample with functional component, is this the behavior you're looking for ? codesandbox.io/s/pedantic-elion-39iri

Morta1 Over a year ago

@LuizHenrique try now

|

Collectives™ on Stack Overflow

Validate phone number on React.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related