Live notification feature in ReactJS

In today’s article, we will learn how to make notification AAP in reactjs with the help of Laravel.Live notification feature in ReactJS In this app, I didn’t use any package for notification I just used customer code in reactjs to create notifications in reactjs. Install react from https://reactjs.org/. Code for react js I have not …

Disable and enable Submit button in ReactJS

We can disable any kind of button in ReactJs easily. Here we will disable button on checkbox click.Disable and enable Submit button in ReactJS . See how we can make OTP Timer in ReactJS – https://learncoders.xyz/otp-countdown-timer-in-react/ Download React Project : https://reactjs.org/ Now We will check CHECKBOX Button and on the click of checkbox button We …

Cannot read property of undefined in Javascript and ReactJs

How to remove Property of undefined error from you Javacript Projects .Cannot read property of undefined in Javascript and ReactJs . Error like Cannot read property `map` of undefined Learn more about ReactJs from https://learncoders.xyz/otp-countdown-timer-in-react/ There are certain ways to resolve this issue in your app To avoid error Property undefined you can use below …

Window is not defined errors in React and Javascript

How to avoid Window is not defined error in React and Nodejs .Window is not defined errors in React and JavaScript . Learn more about Reactjs www.learncoders.xyz 1. First solution: typeof While you can’t use: 2. Second solution: the useEffect hook 3. Third solution: dynamic loading A different solution is to load your Student component …

How to Refresh a Component and Page in React

Sometimes, we want to refresh the page without reloading the page .How to Refresh a Component and Page in React. To refresh a page you don’t need react-router. We want to reload a page by clicking a button. Here’s the example: By using useState() method we can update the component. By using these methods you …

How to send base_64 Image in ReactJS

We can send base_64 Image in ReactJs with help of the Javascript method. How to store base_64 Image in ReactJS. I will use Nodejs for storing base_64 Image into a database. So Node js will handle our React Request. Base64 also known as Base64 Content-Transfer-Encoding is an encoding and decoding technique used to convert binary …

How to Use React.js and Complex JSON Objects

How to parse a complex JSON Response in ReactJs.How to Use React.js and Complex JSON Objects Creating Components We can use Javascript JSON.parse() to parse any JSON object in ReactJS. Dealing with complex JSON responses is a necessity today to React developers Make a component with the name Product Product.js This way you can parse …

On Row click Display Record in Model Box in React

Display API Records in Model Box in React

Today, I will show how to show records in Popup Box or Model Box in React. On Row click Display Record in Model Box in React. I am showing all records from this API link – https://jsonplaceholder.typicode.com/users Display API Records in Model Box in React I am using Bootstrap Model box, You can use Material …

How to access nested object in ReactJS

The format of an object in Javascript ot ReactJs can be nested many times and can get complicated quickly.How to access nested object in ReactJS. Now an above object student can be used in your project but how to consume it. We can use this method So using [] we can access any index of …

Load data into another component in ContextAPI

The Context API solves one major problem–prop drilling.ContextAPI or Redux can be used for PropDrilling problem. Load data into another component in ContextAPI. Context provides a way to pass data through the component tree without having to pass props down manually at every level. And sometimes, some components would have to receive the props only …