React — Tips & Tricks

how to submit form data

handle multiple form elements with SINGLE onChange Handler

toggle a ClassName

fetch from API via axios + hooks

form validations

when you are doing export default <sthg> then while don’t include {}while importing the same.

When you have to export multiple <sthg> <sthg1> then don’t include default keyword…simple export const <sthg> <sthg1>. but while importing you will have to include {}

Both lines are equivalent

How To Format Code with Prettier in Visual Studio Code

delete remote branch on git

@https://www.makeuseof.com/how-to-delete-branch-git/

Deleting a remote branch is quite different. You’ll use the git push command along with the -d flag to delete. After that, supply the name of the remote (often origin) and the branch name:

useState on array

@ https://daveceddia.com/usestate-hook-examples/

How to submit form data in React

Ref: How to submit form data in React (sebhastian.com)

you need to cancel the form submission default behavior with preventDefault() while submitting the form via handleSubmit here.

Handling Multiple Inputs with a Single onChange Handler in React

Ref: Handling Multiple Inputs with a Single onChange Handler in React | Pluralsight

Besides handling just one input, a single onChange handler can be set up to handle many different inputs in the form.

Logic: To handle this efficiently, we define each input with a name prop. This matches a corresponding field in React state. In order to update that state, we use the change event’s evt.target.name field.

In addition to getting the value from the event target, we get the name of that target as well. This is the essential point for handling multiple input fields with one handler. We funnel all changes through that one handler but then distinguish which input the change is coming from using the name.

This example is using [evt.target.name], with the name in square brackets, to create a dynamic key name in the object. Because the form name props match the state property keys, the firstName input will set the firstName state and the lastName input will separately set the lastName state.

Also note that, because we are using a single state object that contains multiple properties, we're spreading (...state) the existing state back into the new state value, merging it manually, when calling setState. This is required when using React.useState in the solution.

Add Required (*) using CSS on dynamic form data

Ref: Add Required Asterisk With CSS — Paulund

But what would happen if you forget to add the asterisk after a form field or if the form is dynamically created, here is a quick tip for automatically adding a red asterisk next to required fields just by using CSS. Here is a standard HTML for creating a form field as you can see the label has a required class therefore we need to add an asterisk after this label.

Using CSS we search for all labels with a class required and use the :after pseudo class to add an asterisk and set the colour to red.

Toggle a ClassName — the Hooks way

Ref: https://reactgo.com/react-toggle-class/

Toggle between two classnames

Adding a classname to the existing class name

fetch data from APIs with Axios and Hooks

Ref: How to fetch data from APIs with Axios and Hooks in React — Kindacode

multiple option selection in react select

Ref: https://stackoverflow.com/questions/28624763/retrieving-value-from-select-with-multiple-option-in-react

Form Validations

Ref: http://jsfiddle.net/5e6zr2Lq/1/

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.