Great! We have a perfect form designed for collecting the data about our guests!
In the previous chapters, we've learned how to use the
AutoForm and redesign its layout, by changing the order of the fields and error messages (if any).
We've also found out how to change the fields' types, by using predefined ones, such as
Now we're going to learn how to define a custom field.
Let's assume that our conference has a limited number of attendees. What we need is to prepare special passes, with the first name, last name and the photo of the person. Therefore, we need to add one more field to our form - an image field, which should enable our guests to choose a photo. As there isn't such field provided, we have to create it ourselves.
Let's add a new property to our schema -
pictureUrl, which will store an URL string containing guest's picture,
and declare that it will be managed by our newly created custom
We can prepare the custom field by creating a React component and wrapping it in a
connectField will pass various props related to the form management, such as
onChange() function, current field's value, errors an so on.
You can find the whole list of guaranteed props inside the helpers section.
It's worth noting, that it will also add the
Field suffix to the name of our component.
Our newly created
ImageField looks like this:
The component itself is a file input that accepts only images.
After the file is selected, it is converted to the DOMString that contains a URL representing the user's picture.
Please pay attention to what props the
Image component uses:
value are provided by a
By using these, we don't have to worry about managing the field's state.
Take a look at the form code:
and the form itself: