What it is and how to use it with React.

According to  MDN, FormData is an “interface (that) provides a way to easily construct a set of key/value pairs representing form fields and their values”. It is a simple data structure that holds key/value pairs that correspond to an HTML form. As such, it has a constructor — FormData()- and several methods that are used to manipulate collected data.

Methods available to FormData interface

Handling forms in React was/is a notoriously hard task for any developer. Code can easily get mangled, and it becomes difficult to understand it. So much so, that several solutions are introduced ( Formik being most popular).

FormData can add clarity to your code while managing forms in ReactJS.

Simple TODO list

Let’s build a simple todo list, starting from create-react-app and utilizing React Hooks, with FormData interface. We also utilize the react-bootstrap library, to have ready to use css classes.

Creating components

For our todo-list, we’d need a couple of components:

• ToDos - A list of our todos
• **AddTodo **- A form that’s used for adding todos to list

Both of these components should be imported into your main App.js file.

#coding #react #javascript #programming