Forms come in different shapes, sizes, and levels of complexity. It is relatively simple to quickly scaffold a login form or a contact form with a few fields, but what happens when you have to take it to the next level and create a completely dynamic form that is driven by an API or schema?

Up until now, we have worked with a relatively simple form that only asks the user for some basic data but everything is hardcoded as a static form. If our mock website wanted to add or remove some fields from the form, we would have to manually make the changes, deploy them to our server, and possibly even adjust the backend to handle the different fields. But what if we wanted to automate this whole process?

In this chapter, we will build an example dynamic form that will be completely powered by an API endpoint. Schema-driven forms are very powerful, as they can be controlled and modified directly by your application's API. That means when something changes in your backend, your form will automatically adjust itself not only on the frontend but also into a self-aware understanding of how to send the dynamic data back to the API.

This chapter will cover the following topics:

• Exploring the starter kit
• Preparing the schema
• Loading the schema and creating a Renderer component
• Dynamically binding user data
• Creating a mock API
• Loading the new API into the app
• Translating the API into a working schema