When working with date pickers in web applications, especially in form-based interfaces, developers often encounter a common and frustrating issue: a date that was selected by the user appears one day earlier when reloaded in an edit form. This article explores how we resolved this issue in a React application using react-datepicker, and what you… Continue reading Fixing the Off-By-One Day Date Issue in React Due to Timezone Shifts
Author: Juby Thomas
Event Trigger Behavior in postgress
An event trigger fires whenever the event with which it is associated occurs in the database in which it is defined. Currently, the only supported events are login, ddl_command_start, ddl_command_end, table_rewrite and sql_drop. Support for additional events may be added in future releases. The login event occurs when an authenticated user logs into the system. Any bug in a trigger procedure for this… Continue reading Event Trigger Behavior in postgress
What is Payload GraphQL?
Payload GraphQL refers to the GraphQL API provided by Payload, a headless CMS and application framework built with TypeScript, Node.js, React, and MongoDB. Unlike traditional CMS platforms, Payload is code-based and developer-centric, offering a powerful backend that can be extended to power various applications. Its GraphQL API is one of three ways (alongside REST and… Continue reading What is Payload GraphQL?
Payload 3.0
The much-anticipated Payload 3.0 has officially arrived, marking a significant milestone in the evolution of this powerful headless CMS. This major release brings revolutionary changes that promise to transform how developers build and deploy content-driven applications. However, with great power comes great responsibility – and some important considerations for deployment. The Dawn of a New… Continue reading Payload 3.0
How to Implement Multiple Image Upload Functionality in React/Next.js
Adding multiple image upload functionality to a web application enhances user experience by allowing the association of several images with a single entity—such as a “sketch” in a design app. This guide walks you through implementing this feature in a React/Next.js frontend with a backend that stores images as an array, covering state management, file… Continue reading How to Implement Multiple Image Upload Functionality in React/Next.js
Understanding Tailwind’s Spacing System: Space, X, and Y
Tailwind CSS provides a powerful and flexible spacing system that helps developers control margin, padding, and gaps effortlessly. The spacing utilities in Tailwind are designed to make layout adjustments intuitive and maintainable. Among these, space-x and space-y play a crucial role in managing the spacing between elements. Tailwind uses a predefined spacing scale based on… Continue reading Understanding Tailwind’s Spacing System: Space, X, and Y
Using Slugs in Next.js for Dynamic Routing
Introduction Slugs are user-friendly, URL-safe strings used to identify resources. In Next.js, slugs are commonly used for dynamic routes, such as blog posts, products, or user profiles. This article covers how to implement and use slugs in Next.js. 1. Setting Up a Dynamic Route To create a dynamic route using slugs, create a file inside… Continue reading Using Slugs in Next.js for Dynamic Routing
1. App Router (Next.js 13+) – Using useSearchParams (Client) & searchParams (Server)
Client Component – useSearchParams (next/navigation) “use client”; import { useSearchParams } from “next/navigation”; export default function Page() { const searchParams = useSearchParams(); const name = searchParams.get(“name”); // Get ‘name’ from URL return <div>Hello, {name || “Guest”}!</div>; } Example URL: http://localhost:3000?name=John Output:Hello, John! Server Component – searchParams Prop export default function Page({ searchParams }: { searchParams:… Continue reading 1. App Router (Next.js 13+) – Using useSearchParams (Client) & searchParams (Server)
Implementing Dependent Dropdowns in React with API Filtering
When building forms in React, you might need to create dependent dropdowns, where the options in one dropdown depend on the selection of another. This is commonly used in scenarios like selecting a category and then filtering relevant subcategories. In this article, we’ll cover: How to create a dependent dropdown feature in React. How to… Continue reading Implementing Dependent Dropdowns in React with API Filtering
Handling Nested Arrays and Objects in React: Correcting Data Access in Assembly Items
In React applications, handling API responses with nested arrays and objects can often lead to unintended undefined or null values if not accessed properly. A common issue arises when trying to retrieve properties from a nested structure without checking if intermediate values exist. Understanding the Issue In our case, we are dealing with data coming… Continue reading Handling Nested Arrays and Objects in React: Correcting Data Access in Assembly Items