This video is available to students only

Sub in More Complex Components

While these components require a little more effort to get working, the improvements they provide are worth the time.

Implement more complex components in Hardware Handler#

We've got some practice bringing in basic components from the Ant Design System to replace our custom-styled components.

Now it's time to take it up a notch because Ant doesn't just do simple components — it also boasts robust, complicated ones, too, that drastically reduce the amount of code devs have to write themselves.

We'll take some of the more complex components in our app and replace them with Ant's versions, and you'll be amazed how much less you'll need to make them work AND look good.

Forms are always needlessly complex#

When I think about Hardware Handler's more complicated components, the first one that springs to mind is the <ProductForm> component. Forms are always complicated, whether they're written with React, Vue, or plain JavaScript, because there are so many requirements between input types, validations on the client and server-side, and more.

But AntD can really help simplify this situation. Let's get going.

Import all the Ant form components in ProductForm.js#

Before we start replacing the <form> inside of our ProductForm.js file, take a good look at the AntD form documentation.

There's a lot to take in here, but they've got examples of all the pieces we'll need inside a form: the form itself, the inputs, the selection dropdown — all of it.

So, the first thing we'll want to do with our <ProductForm> is import all the AntD pieces we'll need.

Add the following AntD components to our ProductForm.js file.

Replace the JSX form elements with Ant components#

Okay, this section is going to be a bit of a doozy, but we'll try to do this in an organized fashion.

Inside of our JSX, we'll want to begin replacing our components with Ant components, and we'll start with the <form> element.

The <form> element on line 80 will become <Form>, then underneath that, we can replace the <ul>, <li>, and <label> elements with <Form.Item>.

<Form.Item> is the wrapper Ant uses to define each separate section within a <Form>, and it's where we'll add properties like label and name and any other necessary options.

So for this first input, which is the wrapper for the <select> dropdown of departments, we'll give the <Form.Item> a label to show in the browser and a name that is like our previous <label> element's htmlFor property. Here's what it should look like.

And now we come to our first form element to replace: the department <select>. Lucky for us, the AntD <Select> is quite similar to our current <select>.

It accepts placeholder text, a value, and an onChange function — just like our original element. And the <option>s inside of the <select> become <Select.Option> elements.

Here's what the rest of the first form element will look like — don't forget the closing <Form.Item> tag at the end.

Now we'll do the same replacement for the rest of our form inputs.

Our next form input, for the product name, should look like this when we're through:

This <Form.Item> should look similar to our first one, and the AntD <Input> also accepts placeholder text, a value, and an onChange function.

Our brand, description, and retail price inputs should look very much the same. You could take a shot at replacing them yourself and then check my code below if you get stuck.

Here is how I'd replace the next three inputs.

Notice that there's a special <Input.Textarea> component to replace traditional <textarea> elements, but the rest should feel relatively familiar.

Finally, wrap our Ant submit button in a <Form.Item> tag as well — there's no point leaving it as the only <li> inside of our form.

Okay, everything about this form has become an Ant component — we're off to a really good start. Let's add some small details to make sure this form continues to work the same way.

One thing we can do with Ant forms is indicate to users which elements are required. By adding the line rules={[{ required: true }]} to a <Form.Item> element, a little red asterisk appears next to a field to indicate it must be filled out.

It appears like this in the browser:

AntD form element that is required, as indicated by an asterisk next to the element

We need to add this line to our department, product name, brand, and retail price form elements. Go ahead and do so.

Now let's test our form and see if it still works. We'll take care of the styling after its functionality is confirmed.

When you try to select a department from the dropdown, you should see an error in the browser.

Error caused in the browser from targeting the wrong element

This error is happening because the Ant <Select> just accepts a value, not an Easy enough to fix in our code.

Now let's test our product form again. This time, you should notice that our retail price element accepts a lot more than just numbers. It turns out Ant has a special input just for numbers: the <InputNumber> component.

Using this component will make our input only able to accept numeric inputs, and it, too, is simplified slightly because it only needs a value instead of, as well.

So we'll import the <InputNumber> component and then replace it for the retail price input.

The final element retail price will look like this:

Start a new discussion. All notification go to the author.