React Material Table – How to Show Icons in Action and Other Components

Material-Table React is a profound library to create rich-featured and outstanding datatable grids. In this guide, we will find out the best way to use Icons in the React material table grid.

React Material-Table uses material icons to show at various places including checkboxes, search, sorting arrows, export, cross, filter etc. Furthermore, we can effortlessly add more action icons at the table or row level.

Read more

Create Multilevel Nested Child Routing in React

In this guide, you will learn how to create nested routing in a React JS application. We’ll be using the React Router DOM 6 to implement routing in React.

Multi-level nested routing allows having various components on a single page which can have a parent-child structure. In such representation, a single view can have multiple Outlets to project their child components.

This react application will have three levels of nested routing definition, each level will also have the default route definition that will open the default child page if nothing is defined in the URL.

 

Read more

Pass Data from Child to Parent in React

In this ReactJS tutorial, you will learn how to pass data objects from the Child to Parent component using the function components.

ReactJS applications can have a number of components, and many of them may communicate to send data from one to another component.

The parent and child relation is a very common relation between various components. Data can move from parent to child or the child back to the parent. We have already discussed how to pass data from the Parent component to the Child component.

Read more

Parent – Child Dropdown Selectboxes in React Example – Interdependent Selection Tutorial

In this React tutorial, we will explore how to add a select box or dropdown form control and bind on change event handler onto it. We will be discussing adding multiple react dropdowns having interdependency for its child dropdown.

If you looking at how to add a select box control in a React Js application, then you are in the right place. Adding a simple form control like a select box is very easy in a React JS application. The onChange event handler will emit the value of dropdown, which we can fetch on submit of form event.

Read more

How to Pass data, Open React-Modal from Parent Functional Component

This example tutorial will teach how to open the React Modal component in the child functional component. We will handle the OpenState of Modal from the parent component and pass dynamic data from parent to child. Moreover, the react-modal component will pass back data to the parent after the modal is closed.

Read more

React – How to Get Height and Width of Component Container

Calculating the size of component elements and return the height and width of containers in React using the react-sizeme library; In this react tutorial, you will learn how to get height and width on elements in a component.

A reactive application, consisting of the various components with single responsibilities can sit anywhere to do its job. In such a case, it’s very important to know how much space it needs to occupy for specific screen size.

Read more

[Resolved] useState not showing updated value – Deploy Callback and useEffect to Solve

When trying to get the updated state from the child to parent component, it is not updating the latest value in the console or JSX template.

Sometimes when updating the state in a functional or class component in React, does not reflect the updated values immediately. This happens due to the asynchronous behaviour of state variables which takes time to update in the internal state.

Read more

How to use IF – Else in JSX React Render Function?

The JSX HTML inside the render() function acts like a Javascript. So it becomes confusing when trying to use actual javascript expressions inside the JSX templates.

Let’s have quick look at how to add If-Else blocks inside the JSX template and what are the best approaches available to do that.

Read more

React – How to Create Dynamic Search and Multi-Select Dropdowns with React-Select

In this React tutorial, we will discuss how to implement a dynamic multi select box in React js application.

Dropdowns are very important and useful UI components that enable a user to select a single of multiple values from a set of huge lists. Dropdowns are used for multiple use-cases like selecting options, filtering results, or choosing from a list of items.

In this tutorial, we will use the React-Select npm library to create dynamic search and multi-select dropdowns.

Read more