I used React Bootstrap Form component in my application. On Submit if Form Validation Criteria is true, I move or render to a difference component in my Parent class. It render the component I wish, but my render component is unresponsive for first 10 second. Could you let me know the reason for this. My code snippet is
handleSubmit = (event) => {
const form = event.currentTarget;
console.log("EVENT LOG", event)
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
this.setState({ validated: true });
}
else {
event.preventDefault();
event.stopPropagation();
this.props.sendData(this.state);
this.props.nextStep();
}
//this.setState({ validated: true });
};
I store the state of my current Child component to parent array variable and render the desire child component with this.props.nextStep() methods.