Validation flow in react native components

Spread the love

How to handle validation flow react native components.

Let’s say you have a parent component which will contains many children components.

Each children components are reusable, and you want to have specific validation for each components.

In the image, you can see, we have one container component with a save button.

Inside it, there are 3 children components which contain different forms with different fields (could be text or anything).

When click save button, we want to validate data from children component before sending to server, also display the validation message inside each children components.

To do it, we will define the data flow first.

We put the validation logic in container component.

To collect data from children components, we define a callback function onFormChange and pass it to each children components

From children components, we pass data back to parent container and validate data here.

And if we want to pass the validation message back to children, we pass it to data object and pass it back to children.

In children components, we catch event componentWillReceiveProps

componentWillReceiveProps(newProps) {
this.setState({ …newProps.data });
}

Now if we want to show the validation message from children component, we can get it from this.state.textValidationMessage without any problem.

This is how I handle validation flow in my react app. Please let me know by comment bellow if you guys have others solutions for this topic (validation flow react native)

Leave a Reply

Your email address will not be published. Required fields are marked *