React - MUI TextField error does not visibly display after error state is changed

Question

I am trying to validate an email TextField with a button. I am using props to store the email TextField's error state.

Email Textfield code:

<TextField
required
error={values.emailInvalid}
id="emailAddress"
name="emailAddress"
label="Email Address"
onChange={handleChange("email")}
defaultValue={values.email}
fullWidth
autoComplete=""
variant="standard"
/>

Button code:

var re = /\S+@\S+\.\S+/;
    var testEmail = re.test(this.props.values.email);
    if (this.props.values.email.length === 0 || !testEmail) {
      this.props.values.emailInvalid = true;
    } else {
      this.props.values.emailInvalid = false;
      //go next page
    }
 console.log(this.props.values.emailInvalid);

The "emailInvalid" boolean is updating properly according to the console output, but the TextField does not visibly show the red error state is "emailInvalid" is set to true.

score 0 · Answer 1 · answered Jan 20 '22 at 11:42

0

You cannot just assign the value of emailInvalid with this.props.values.emailInvalid = true.
If values is a state object, you need to also pass the setState function in props and use it like below

this.props.setState({ emailInvalid:true })

Also, you should use this.props.values instead of values in the TextField component

answered Jan 20 '22 at 11:42

Karan Kaushik

139
3

can you call setState in a prop? – Shayan Faghani Jan 20 '22 at 11:54
1

Yes, once you pass a function in props, you can call it in the child, just like you would in the parent – Karan Kaushik Jan 20 '22 at 11:55

score 0 · Answer 2 · answered Jan 20 '22 at 11:54

0

You need to use setState to mutate the component state for example

SetEmailInvalid(true);

for Class based components:

this.setState({emailInvalid: true});

You can't edit react state directly. Open This Link To See Why

answered Jan 20 '22 at 11:54

Shazil Sattar

61
8

score 0 · Answer 3 · answered Jan 20 '22 at 11:59

The way you are changing things in React is not supported. you can follow this guide: First of all: PROPS ARE READONLY and you can not change them. Second, for changing things that have to be shown in the browser as it changes is done via State. to fix your error first import useState like: (we are using states as hook)

import {useState} from "react";

then you have to use your state and initialize the amount:

const [emailIsValid, setEmailIsValid] = useState(true)

this will set the initial value of the emailIsValid to true.

now whenever you want to change the value of emailIsValid , you have to call the set function and set the value like: setEmailIsValid(false)

now you can use the emailIsValid anywhere in your react component.

React - MUI TextField error does not visibly display after error state is changed

3 Answers3