Conditional Enabling of Submit button in a form using React

Introduction

Well, today I am going to discuss a very common and useful topic about forms in React. At least most of you as front end developers would have encountered with this scenario. The use case we are going to address today is something like this.

Let’s say we have a simple application which enables us to add new users. For the simplicities sake let’s assume this input form consists of first name, last name and age. We make first name and last name mandatory while keeping age as an optional field. So the submit button of the form should get enabled only if the user has entered some values to both the first name and last name fields. In all other situations the submit button should be disabled. Check out the scaffolding below for more details. Notice that the submit button is disabled now since a value is not given for the First Name input field.


Workshop

Well, how are we going to address this requirement elegantly. I am using redux forms to get this thing done. We gonna enable submit button conditionally based on the values of input fields in our form. Let me first share the code with you and then I’ll explain it to you. Check out the code below.


First we need to connect our form to the application level redux state, so that we can get hold of the values later. For that we use connect helper. Then we fetch first name and last name properties from our application level state. These values are finally returned from our wrapped component. The values are then used inside the form to enable submit button conditionally. The isSubmitEnabled function is responsible for that. At last, this boolean flag is used to render the submit button accordingly.  You may find the code for entire solution here.


Conclusion

Well, it was a simple, yet very useful thing. We made it elegantly and smartly with a fairly less amount of code. Our code is much more simple, readable and composable with this solution. I hope that you will be using this somewhere down the line in your projects. That does it for this session. I’ll see you next time.

Comments

Post a Comment

Popular posts from this blog

Introducing Java Reactive Extentions in to a SpringBoot Micro Service

Image
Introduction Today we are going to take a look at Reactive Programming using Java8 and RxJava, which is a library for composing asynchronous and event-based programs by using observable sequences. RxJava stands for Reactive Extensions for the JVM. It extends the observer pattern [Gamma95] to support sequences of data/events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety and concurrent data structures [1]. Pre-Requisites : Having a good knowledge about Java8, Functional Programming and spring boot microservices. What is Reactive programming? In essence, Reactive programming is an asynchronous programming paradigm concerned with data streams. The system time, a list of entries from the DB/API, user clicks, everything can be a stream of data. Data from different streams can easily be combined and transformed, and in the end processed/observed by the ...
Read more

Optimal binary search trees

Image
Suppose that we are designing a program to translate text from English to French. For each occurrence of each English word in the text, we need to look up its French equivalent. We could perform these lookup operations by building a binary search tree with $n$ English words as keys and their French equivalents as satellite data. Because we will search the tree for each individual word in the text, we want the total time spent searching to be as low as possible. We could ensure an $Θ(log_2 \;n)$ search time per occurrence by using a red-black tree or any other balanced binary search tree. Words appear with different frequencies, however, and a frequently used word such as the may appear far from the root while a rarely used word appears near the root. Such an organization would slow down the translation, since the number of nodes visited when searching for a key in a binary search tree equals one plus the depth of the node containing the key. We want words that occur frequently in the t...
Read more

Combining the emissions of multiple Observables together using RxJava Zip operator in a Spring Boot Micro service

Image
Introduction Well, today we are going to discuss an advanced RxJava operator called Zip. Let’s first take a look at the zip operator at a glance and then move on to a real world example that leverages the capabilities of the operator. In fact, zip is a very powerful and useful operator provided in the RxJava library. Prerequisites : Good knowledge of Java8, Functional Programming, RxJava, Spring Boot, Microservices. User Level : Advanced Since this is an advanced article, I am not going to walk you through the basics of RxJava or Spring Boot microservices. If you need to get some basic understanding of RxJava, I thoroughly recommend you to go through one of my previous blog posts [1] [2] or any other good introductory article about RxJava. If you need to learn more about Spring Boot microservices please go through some of the spring tutorials which are really comprehensive and impressive. RxJava Zip Operator Combines the emissions of multiple Observables together via a speci...
Read more