I have built dozens of React applications, and I often found myself copying the same UI buttons and input fields from one project to another. It was a huge waste of time. I finally decided to pack my reusable UI elements into a standalone library that I could install via NPM in seconds. In this … Read more >>
I’ve seen the ecosystem move from complex class components to the sleek world of functional components. If you are using TypeScript with React, one of the first things you’ll need to master is how to properly type these functional components. In this tutorial, I will walk you through everything you need to know about React … Read more >>
To pass props to a component in React, write them like HTML attributes where you use the component: <Greeting name=”Olivia” city=”Austin” />. The component receives them as one object, usually destructured in the function parameters: function Greeting({ name, city }). This guide covers React props in functional components step by step: every value type (including … Read more >>
Testing a small React component shouldn’t require you to set up a massive local environment every single time. In my eight years of developing React applications, I have often found myself needing to quickly prototype a UI element or share a snippet with a colleague. Setting up a local Vite or Create React App instance … Read more >>
As a React developer for over eight years, I have lost count of how many times I’ve stared at a blank screen, wondering why my API data isn’t rendering. It is a frustrating experience, especially when you can see the data sitting right there in the network tab of your browser tools. In this tutorial, … Read more >>
During my decade of developing complex web applications, I have often run into situations where a React component simply refuses to update when I need it to. While React is generally excellent at managing state changes, sometimes the built-in reactivity isn’t enough to trigger a fresh start for a specific UI element. In this tutorial, … Read more >>
To force a React component to re-render (rerender), change its state. In a function component, the usual “forceUpdate” is a reducer that increments a counter: const [, forceUpdate] = useReducer(x => x + 1, 0); call forceUpdate() and the component renders again. Class components have this.forceUpdate() built in. To force a child component to re-render … Read more >>
Are you using Datepicker in any web application? Then you might need to set the current date in a datepicker using JavaScript or jQuery. In this example, I created an HTML input form and used a date picker control. My requirement was to bind the current date to the date picker using jQuery. HTML DatePicker … Read more >>
To get the id of the clicked element in jQuery, read this.id inside the click handler: $(“button”).on(“click”, function () { console.log(this.id); }). $(this).attr(“id”) returns the same value. This guide shows each way to get an element’s id with jQuery, the difference between this, event.currentTarget and event.target, why arrow functions break this.id, how to get ids … Read more >>
As a developer working on a project, I recently encountered a situation where I needed to merge multiple arrays containing employee data. The concat() method proved to be a handy solution for this task. In this tutorial, I will explain how to join two or more arrays in TypeScript using the concat() method. Understanding the … Read more >>