React: length validation, maximum update depth exceeded - reactjs

Question

Fairly new to coding, and especially to React. Have seen other similar questions but can't seem to apply the answers to my code.
I'm trying to update the 'validate' state when the input length reaches 5 and I get the 'maximum update depth exceeded' error. From what I understand when the length reaches 5 it re-renders the DOM, finds that the length = 5 and so begins to call itself recursively (correct me if I'm wrong!), and so I'm trying to work out how to execute validationHandler() when the number reaches 5 only once.
class App extends Component {
state = {
inputLength: '0',
validate: 'Too short'
}
changeHandler = (event) => {
this.setState({ inputLength: event.target.value.length });
};
validationHandler = () => {
if (this.state.inputLength > 4) {
this.setState({ validate: "Enough"})
}
};
render() {
return (
<div className="App">
<input
type="text"
onChange={this.changeHandler.bind(this)}
/>
<Validation
change={this.validationHandler()}
validate={this.state.validate}/>
</div>
);
}
}
I have a separate validation component.
const validation = (props) => {
return (
<div className="validation">
<p onChange={props.change}>{props.validate}</p>
</div>
)
};
Thanks in advance!

Answer 1

You have exactly the same issue as ReactJS: Maximum update depth exceeded error.
However, while applying the solution, i.e.
<Validation
change={this.validationHandler}
validate={this.state.validate}/>
will fix the error, it won't make your app work. The validationHandler method will never be called because p elements do not trigger a change event.
<p onChange={props.change}>{props.validate}</p>
Instead you want to validate the input length whenever the input changes, so that should happen inside the changeHandler method:
changeHandler = (event) => {
this.setState({
inputLength: event.target.value.length, // remove if not needed
validate: event.target.value.length > 4 ? "Enough" : "Too short",
});
};
and
render() {
return (
<div className="App">
<input
type="text"
onChange={this.changeHandler}
/>
<Validation validate={this.state.validate}/>
</div>
);
}
Calling .bind(this) has no effect because this.changeHandler is an arrow function.

Answer 2

Change the code to below
class App extends Component {
state = {
validate: 'Too short'
}
changeHandler = (event) => {
if (event.target.value.length > 4) {
this.setState({ validate: "Enough"})
} else {
this.setState({ validate: "Too short"})
}
};
render() {
return (
<div className="App">
<input
type="text"
onChange={this.changeHandler.bind(this)}
/>
<Validation
validate={this.state.validate}/>
</div>
);
}
}
and component to
const validation = (props) => {
return (
<div className="validation">
<p>{props.validate}</p>
</div>
)
};