I have a component Body.jsx, it contained logic of fetching data from an API and filtering as well. I tried to create a custom hook useResData which separates out logic of fetching data as shown- export const Body = ()…
I'm working on creating a shopping cart. The cart itself (the list of all items in the cart) is a component and each cart item is a component. In each cart item, there's a dropdown list to change the quantity…
I am using mulitple Headless UI dropdown menus. So when one of the dropdown is in open state and I try to click on the another dropdown menu, it just closes the current dropdown alone and doesn't open the new…
I am building a front-end application using React, TypeScript, and React Hook Form for form management. I decided to run some tests to try to better understand how React Hook Form works, and I ended up encountering a "problem" when…
I am currently trying to incorporate a popup modal function which I have managed to do and works however, I am trying to now create that same function inside a useEffect hook so that it does not re-render every time.…
I am currently having troubles accessing the valus inside a nested array return from my API call. My API repsonse is being ran through a couple filters prior to being passed to the table as the variable "dataPagedSortedAndFiltered" when I…
[1]I'm working on a React application and recently added new routes to my App.jsx file. However, after adding these routes, my application only shows a white screen. When I remove the new code, the landing page displays correctly again. Here…
I wanted to use a scroll effect (parallax + filters) in a very simple page. It's just a sticky 120vh div with a background image and some text. Everything works fine in the desktop browser and with the mobile view…
I'm writing a library of react components using Vite and TypeScript. To create type definition files I'm trying to use the recommended plugin vite-plugin-dts. This is what my vite.config.ts file looks like: import { defineConfig } from "vite"; import dts…
I am using shadcn, zod, react-hook-form to render a form, some fields are optional and some are mandatory so they do not have the .optional() attribute. I want to render a red * if the field is mandatory, how can…