Page Comparison

...

1. Create a .jsx file with an appropriate name(preferably the same name as the designer) in the /src/components directory.
2. Create an appropriate render method.
3. Create functions to handle the actions performed by user such as onClick, onChange etc.
4. Check the propTypes passed to the component.
5. Finally register the component using the Component Store. Use the same name as the one used during creation of the designer component.
6. If there are any validations to be performed, create checks for them in /src/helpers/controlsHelper.js
7. Finally handle those checks in /src/helpers/Validator.js . This will keep the code neat and will help others in the future.

Check out the following links and its associated repo for a sample component. The sample component is a Date Calculator which calculates a Future date based on the provided date.

1. The Form Builder Designer Component
2. The Component for Observation Forms