React JS Render Form With Dynamic Data From Backend API

including field validations

We need to plot a form whose entire fields are coming from the backend. Since the fields are not known in advance, we cannot add them statically. The data about each field, such as its id to save with, name, validations, etc. all comes in the API response too. For this scenario, I have used React Hook Form. The example code for a dynamic questionnaire is shared below.

[Read More]

React Docs Ebooks

In EPUB, MOBI, and PDF formats

I wanted to read React official docs in my Kobo e-reader device, but I could not find it anywhere in book form. I found this gist and its thread quite helpful. I installed pandoc and after spending some time in slightly reformatting the book and its table of contents, I managed to export the docs, with additional help from Zamzar file converter, in EPUB, PDF, and MOBI formats. [Read More]

JavaScript: Change The Behavior of A Class Method At Runtime

Useful Strategy To Perform Different Operations Without Repeated If Else Or Switch Statements

Recently I came across a problem where I needed to perform two different sets of operations throughout the application for two types of users. The trouble was:

  1. I needed to turn on or off an operation based on certain condition, which would only be known once the user was logged in, not at the beginning.
[Read More]

React JS Code Review Checklist

A handy guide to review a pull request

This post provides a checklist to review a React JS application code. For many issues, especially related to personal taste like semicolon or arrow vs traditional function, and things like propTypes, we can simply configure linters such as ESlint and Prettier to automatically detect and force us resolve the warnings. We can furthermore make these linting fixes mandatory on commits (such as with Husky hooks) or PR merges (with CI/CD tools such as github Actions).

[Read More]

JavaScript Inheritance and Polymorphism in React JS Application

The React JS documentation emphasizes on using composition over inheritance for components, as there is hardly any scenario that requires component inheritance. However, that does not stop us from using inheritance and polymorphism within our JavaScript code. To explain, we discuss one such example below by using es6 classes: [Read More]

Add A Dropdown List in Suneditor React Using Custom Plugin

Merge Tags Or Insert Variables Can Easily Be Listed For The User To Choose From

In almost all of the text editors available for React JS adding your own dropdown list is not an easy task. In a React app I was using suneditor, and I needed to add my own dropdown list for the users to select a merge tag from, but I could not find a way from their documentation. [Read More]