Material Form UI + ReactJS + TypeScript (Part 2)

Continue part 1 when we have halfway completed when the requirements are completed:

• create checkbox
• submit the form: {categories: [1, 2, 3, 4]
• multi checkbox

In this article we will complete the remaining requirements.

Request:

• Create form for 2 types of text input and checkbox + submit button
• The form submission data has the form (only need console.log in the executable function): {categories: [1, 2, 3, 4], meta: ["a", "b", "c"]}
• The meta cannot contain empty data
• Allow add or remove input text
• multi checkbox

Part 1

Start !!!

I used the code of part 1, so you guys can go back to part 1 and review the code for me

form.tsx

FormComponent.tsx

InputType

And finally, DynamicInput

ok we have the following interface

Next as the topic is that we can add input every time we click the Add button and remove that input with the Remove button, we modified the above 2 functions offline

And this is the result

So it’s almost done, but suddenly realized that if we have more than 1 input, what if we want to edit the text of input 1 and input 2? What will the current code look like? What is the value going into state inputs ? Sure, if you run the project now and enter the input, the state inputs field content of the inputs will have no content, so to fix this error we do the following:

Add the onChange function to DynamicInput

DynamicInput

So has finished processing, handle a bit onSubmit function to see any results

getMeta helper function

Run again and see if the result is right for the request . And this is the Source code for both parts.

Have a nice day!

Welcome to ReactJS !!!