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;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!' : ' '}
/>