The React JS Material UI-X library has the Data Grid module for displaying data as a table. The requirement was to set the visibility of certain columns in the data grid to hidden with an option for the user to make it visible through UI. If we filter the data from the data source, user… Continue reading Adjust visibility of columns in React JS Material UI-X Data Grid element
Tag: react js
Function to create a file name for exported Excel document
The requirement was to generate unique and valid file names for Microsoft Excel files. The name should contain the data title and date/time when the data was exported. Here is the code I used for creating the file names for Excel documents: function fileNameCreate(title: string): string { // Remove invalid characters, replace spaces with underscore… Continue reading Function to create a file name for exported Excel document
Button for exporting data as Excel document in React JS
Recently, I had to implement a custom button for exporting data shown in a React JS app grid in Microsoft Excel format. The data is received from the NetSuite side using an API call and it is in ‘array of objects’ format. There are multiple libraries that help to create Excel files. But, I used… Continue reading Button for exporting data as Excel document in React JS
useEffect Hook in React: Managing Side Effects
What is useEffect? useEffect is a React hook that provides a way to perform side effects in functional components. Side effects are operations that occur outside the regular rendering process and often involve tasks like data fetching, subscriptions, or manually changing the DOM. Use Cases of useEffect useEffect(() => { const fetchData = async… Continue reading useEffect Hook in React: Managing Side Effects
Understanding State and Props in React Components
What is State? In React, state is a special object that represents the current condition or data within a component. It allows components to keep track of information that may change over time. What are Props? Props (short for properties) are a way to pass data from a parent component to its child components. They… Continue reading Understanding State and Props in React Components
React’s useState Hook
what is useState ? useState is a special function in React that allows functional components to use and manage state. Before hooks were introduced, state management was exclusive to class components, but with hooks, functional components can also keep track of their own state. Basic Syntax import React, { useState } from ‘react’; function ExampleComponent()… Continue reading React’s useState Hook
Difference Between tsx and jsx in React
.js is JavaScript, plain and simple. .ts is Typescript , Microsoft’s way of adding “concrete” types to JavaScript .jsx is JavaScript but with JSX enabled which is React’s language extension to allow you to write markup directly in code which is then compiled to plain JavaScript with the JSX replaced with direct API calls to React.createElement or whatever API is targeted .tsx is similar… Continue reading Difference Between tsx and jsx in React
How to use a mapping object to replace values in a data array of objects
The requirement was to show abbreviated values for the shipping item label values sourced from the NetSuite side in a React JS web application. For this, I created a map object and stored the original names and abbreviations as key-value pairs. Used a map function to replace the values in the data object before rendering.… Continue reading How to use a mapping object to replace values in a data array of objects
How to create a user in the firebase using authentication function using react.js
Set Up Firebase Project: Go to the Firebase Console and create a new project. Set up Firebase Authentication in your project. Install Firebase SDK: In your React.js project, install the Firebase SDK using npm Command for installing firebase is “npm install firebase“ 3. Configure Firebase in Your React App: Create a Firebase configuration file, e.g.,… Continue reading How to create a user in the firebase using authentication function using react.js
Using React JS to save the values in URL params
We can set the values in the URL as params for saving it. By using this even after render the saved values will be there.Created a test-component for Filter section. By using these filters we are filtering the Products on the basis of Colors, Sizes, Price, Item Name. Here useParams in code const useParams =… Continue reading Using React JS to save the values in URL params