{"id":721,"date":"2019-02-23T18:24:31","date_gmt":"2019-02-23T18:24:31","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=721"},"modified":"2021-11-04T01:34:12","modified_gmt":"2021-11-04T06:34:12","slug":"using-custom-react-hooks-simplify-forms","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/using-custom-react-hooks-simplify-forms","title":{"rendered":"Using Custom React Hooks to Simplify Forms"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Use custom React Hooks to build forms that require half the code to write, are reusable, and are much easier to read. Read on to learn more!<\/p>\n\n\n\n

View Code<\/a><\/div>\n\n\n\n

What We’re Building<\/h2>\n\n\n\n
\"A
Our final form powered by a custom React hook<\/figcaption><\/figure>\n\n\n\n

Forms are always mistaken as something that’s easy to build. Think about it, we use forms every single day when we use web apps, from login-forms to search boxes.<\/p>\n\n\n\n

Therefore, because forms are so prevalent, what could be so hard about dropping a simple form into a page?<\/p>\n\n\n\n

Us. Human-beings.<\/strong><\/p>\n\n\n\n

Humans are notoriously bad at using forms. Give us a register page and we’ll find a way to break it and end up blaming the website developer.<\/p>\n\n\n\n

Forms require validation rules, formatting, accessibility options, the perfect layout, and complete browser support.<\/p>\n\n\n\n

That’s a lot for developers to handle. It’s not unheard of for a simple form to use an insane amount of code behind it.<\/p>\n\n\n\n

Setting up the React App<\/h2>\n\n\n\n

If you have an existing React app, you can skip this section and go straight to Building the Login Form.<\/strong> <\/p><\/blockquote>\n\n\n\n

Start by opening a new terminal window and moving (cd’ing) to a directory of your choice. Next, we’re going to use the fantastic Create React App toolset to spin up an empty React project.<\/p>\n\n\n\n

Type this in your terminal and hit return:<\/p>\n\n\n\n

Terminal<\/div>
npx create-react-app react-hooks-form<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Follow the instructions in the Create React App Github repository<\/a>. We can move on once you have your brand-new empty React project running in your browser.<\/p>\n\n\n\n
I’m using the Bulma CSS library in this tutorial. You don’t have to though, as it’s only used for styling the Form component.<\/p><\/blockquote>\n\n\n\n
To install Bulma, type the following into your terminal and hit return:<\/p>\n\n\n\n
Terminal<\/div>
npm<\/span> install<\/span> --save bulma<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Before we start throwing React Hooks at  forms,  we should first do some spring cleaning. (I always do this whenever I spin up a new React project using Create React App).<\/p>\n\n\n\n
Open up App.js<\/span>.<\/strong> Delete everything inside it apart from the outer div tag inside the App<\/strong> function, every import apart from the main React import.<\/p>\n\n\n\n
It’ll look something like this:<\/p>\n\n\n\n
App.js<\/div>
import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> App<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>App\"<\/span><\/span>><\/span><\/span>\n     \n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>;<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
If you want to use Bulma, we need to import it in index.js<\/strong><\/span>.<\/p>\n\n\n\n
index.js<\/div>
import<\/span> React from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> ReactDOM from<\/span> 'react-dom'<\/span>;<\/span>\nimport<\/span> '.\/index.css'<\/span>;<\/span>\nimport<\/span> App from<\/span> '.\/App'<\/span>;<\/span>\nimport<\/span> *<\/span> as<\/span> serviceWorker from<\/span> '.\/serviceWorker'<\/span>;<\/span>\n\n\/\/ Importing the Bulma CSS library<\/span>\nimport<\/span> 'bulma\/css\/bulma.css'<\/span>;<\/span>\n\nReactDOM.<\/span>render<\/span>(<\/span><<\/span>App \/<\/span>><\/span>,<\/span> document.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span>;<\/span>\n\n\/\/ If you want your app to work offline and load faster, you can change<\/span>\n\/\/ unregister() to register() below. Note this comes with some pitfalls.<\/span>\n\/\/ Learn more about service workers: http:\/\/bit.ly\/CRA-PWA<\/span>\nserviceWorker.<\/span>unregister<\/span>(<\/span>)<\/span>;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Building the Form Component<\/h2>\n\n\n\n
We need to build our Form component before we start creating  React Hooks to handle forms events.<\/p>\n\n\n\n
Create a new file under the src<\/em> directory. Call it Form.js<\/span><\/strong>.<\/p>\n\n\n\n
Form<\/g> is going to be a stateful<\/em> functional component. There’s no need to import Component from React now that Hooks  add state<\/g> to functional components.<\/p>\n\n\n\n
Type the following code into Form.js<\/strong><\/span>:<\/p>\n\n\n\n
Form.js<\/div>
import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> Form<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>section is-fullheight\"<\/span><\/span>><\/span><\/span>\n      <\/span><<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>container\"<\/span><\/span>><\/span><\/span>\n        <\/span><<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>column is-4 is-offset-4\"<\/span><\/span>><\/span><\/span>\n          <\/span><<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>box\"<\/span><\/span>><\/span><\/span>\n            <\/span><<\/span>form<\/span>><\/span><\/span>\n              <\/span><<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>field\"<\/span><\/span>><\/span><\/span>\n                <\/span><<\/span>label<\/span> className<\/span>=<\/span>\"<\/span>label\"<\/span><\/span>><\/span><\/span>Email Address<\/span><\/<\/span>label<\/span>><\/span><\/span>\n                <\/span><<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>control\"<\/span><\/span>><\/span><\/span>\n                  <\/span><<\/span>input<\/span> className<\/span>=<\/span>\"<\/span>input\"<\/span><\/span> type<\/span>=<\/span>\"<\/span>email\"<\/span><\/span> name<\/span>=<\/span>\"<\/span>email\"<\/span><\/span> required<\/span> \/><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n              <\/span><\/<\/span>div<\/span>><\/span><\/span>\n              <\/span><<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>field\"<\/span><\/span>><\/span><\/span>\n                <\/span><<\/span>label<\/span> className<\/span>=<\/span>\"<\/span>label\"<\/span><\/span>><\/span><\/span>Password<\/span><\/<\/span>label<\/span>><\/span><\/span>\n                <\/span><<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>control\"<\/span><\/span>><\/span><\/span>\n                  <\/span><<\/span>input<\/span> className<\/span>=<\/span>\"<\/span>input\"<\/span><\/span> type<\/span>=<\/span>\"<\/span>password\"<\/span><\/span> name<\/span>=<\/span>\"<\/span>password\"<\/span><\/span> required<\/span> \/><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n              <\/span><\/<\/span>div<\/span>><\/span><\/span>\n              <\/span><<\/span>button<\/span> type<\/span>=<\/span>\"<\/span>submit\"<\/span><\/span> className<\/span>=<\/span>\"<\/span>button is-block is-info is-fullwidth\"<\/span><\/span>><\/span><\/span>Login<\/span><\/<\/span>button<\/span>><\/span><\/span>\n            <\/span><\/<\/span>form<\/span>><\/span><\/span>\n          <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n      <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>;<\/span>\n\nexport<\/span> default<\/span> Form;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
We haven’t hooked up any of the form onSubmit<\/strong> or input onChange <\/strong>event handlers yet because we want to get a working form in HTML first.<\/p>\n\n\n\n
Save Form.js<\/span><\/strong>. Jump back to App.js<\/span><\/strong> and import Form at the top of the file. Finally, add the <Form \/><\/strong> component to the render function of App.<\/p>\n\n\n\n
App.js<\/div>
import<\/span> React from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> Form from<\/span> '.\/Form'<\/span>;<\/span>\n\nconst<\/span> App<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>App\"<\/span><\/span>><\/span><\/span>\n      <\/span><<\/span>Form<\/span> \/><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>;<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Save App.js<\/span><\/strong>. Let’s make sure our Form component works. Hop over to the running React app in your browser and you should see a nice looking login form.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Great! Now the magic begins! \u2728<\/p>\n\n\n\n
Creating the Custom React Hooks Forms Handler<\/h2>\n\n\n\n
If you haven’t explored React Hooks yet, check out our Simple Introduction to React Hooks<\/a><\/p><\/blockquote>\n\n\n\n
Forms have two main types of event handlers:<\/p>\n\n\n\n