Validate textfield based on input React Material Ui

March 14, 2022

Helo ! I am looking for a way to set error whenever the value inserted in the first text field is different than "28.71",else set correct

My code so far :

class Main extends React.PureComponent {
    render() {
        return (
            <Box sx={SX.root}>
                <Box className="textFieldWrapper">
                    <TextField
                        sx={SX.textField}
                        id="filled-number"
                        type="number"
                        label={this.props.settings.texts.t1}
                        variant="outlined"
                        size="small"
                        style={{width: '100px'}}
                    />
                </Box>
                <Box className="textFieldWrapper2">
                    <TextField
                        sx={SX.textField2}
                        id="filled-number"
                        type="number"
                        label={this.props.settings.texts.t2}
                        variant="outlined"
                        size="small"
                        style={{width: '100px'}}
                    />
                </Box>
            </Box>
        );
    }
}
// -----------------------------------------------------------------------------------------------------------------
//  I N T E R N A L
// -----------------------------------------------------------------------------------------------------------------

// =====================================================================================================================
//  E X P O R T
// =====================================================================================================================
export default Main;

>Solution :

Using a react component state, one can store the TextField value and use that as an indicator for an error. Material-UI exposes the error and helperText props to display an error interactively.

Take a look at the following example:

<TextField
  value={this.state.text}
  onChange={event => this.setState({ text: event.target.value })}
  error={text === ""}
  helperText={text === "" ? 'Empty field!' : ' '}
/>