I'm using react-to-print library to print table compoenent, works fine with maybe 50-100 dataset but doesn't work with few thousands data. I assume with large dataset react cannot render all the dataset at once due to DOM overloading. What's the solution for printing component with big data set or array of objects? Tried React-viewport but it only print component with first array not the whole array ..read more

enter image description here Can someone help me please, I keep getting this error "TS2345: Argument of type  void  is not assignable to parameter of type  Quote | (() => Quote) " but i'm trying to initialize the value of the state with a function that fetch data and return the data. I've try to put any for the function type but noting ..read more

I am using a custom form library in a React project along with yup for field validation. In my PensionAmountField component, I have a radio group where users can select a pension amount option. Even when an option is selected, the yup validation erroneously prompts the "Please select an option" error message. I need help identifying why this error persists despite a selection being made. Here is the relevant code: Parent Component: const formality = useFormality(); const handlePensionAmount = (value: string, fieldName: string) => { setPensionAmount(value); formality.updateF ..read more

Here is my code: import React from 'react' import {BsLinkedin} from 'react-icons/bs' const HeaderSocials = () => { return ( <div className='header_socials'> <a href="https://www.linkedin.com">BsLinkedin</a> </div> ) } I first ran "npm install react-icons --save", however when I import BsLinkedin from 'react-icons/bs' and try to call for it, I get the error React Icon is declared but its value is never read .ts(6133). Although I can still start my local host, the text "BsLinkedin" is displayed instead of the actual icon I want ..read more

How are you? So I'm trying do a calculator that It is possible to enter numbers from the keyboard and from the screen itself. Using the numbers on the screen works well, however when trying to capture the numbers that are typed by the user via the keyboard, the symbols are not being captured. I installed some consoles to try to understand what is happening but I couldn't and I would like to know if any of you can help me. I noticed that in the console console.log("o number digit é", numberDigit);, numberDigit is not returning but I can't understand why this is happening and as a result, I can ..read more

I'm encountering an issue in my React application where the fetch function inside a useEffect hook is being called twice, and I'm struggling to understand why. Here's the relevant code: useEffect(() => { if (auth.userDTO && router.isReady) { let url = paymentId ? `user/tickets?paymentId=${paymentId}` : 'user/tickets'; fetchWithBaseUrl(url, { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + auth.userDTO.token, }, }).then(async (response) => ..read more

I'm asking for a bit of help with a project im currently building. It's being constructed in Visual Studios with React Vite. Im using Framer motion to be able to transition between pages. but for some reason the exit animation is not working, the initial works fine. I am using the AnimatePresence correctly and have all the children components wrapped in motion brackets. here is my AnimatedRoutes.jsx page below below: import React from "react"; import { Routes, Route, useLocation } from "react-router-dom"; import Home from "../pages/Home"; import Contact from "../pages/Contact"; import About f ..read more

I'm trying to build a react component using details, summary. But I've facing a lot of troubles with the open animation. I can't set a max-height because of the height of details can variate, so to fix that I make a div component with a overflow hidden that stores another div which is the text inside of details. My idea is like slide down smoothly. The problem is that works only the first time but when I close details and open it again the animation don't show up. When I inspect the div of text and open/close again the animation shows up. I have inspected the dev-tools but still I can't find t ..read more

I'm working on a web project and I'd like to implement a carousel that behaves a bit differently from the typical left-to-right or right-to-left carousels. Instead, I want the carousel to move down the page slowly, displaying one item at a time. Think of it as a vertical-scrolling carousel. const [activeSlide, setActiveSlide] = useState(0); // State for Carousel useEffect(() => { const interval = setInterval(() => { setActiveSlide((prevSlide) => (prevSlide + 1) % slides.length); }, 3000); return () => { clearInterval(interval); }; }, []) The carousel should di ..read more

I am using the mui Transfer List as a component to select and transfer items from one list to another. The project uses react-hook-form and zod for form data validation and submit. How to register and submit the left side data? Here is the code of the moment that the Transfer is called. I can not include the rest of the code. <TransferList leftArray={leftList} rightArray={rightList} /> Schema : export const roleSchema = z.object({ roles: z.array(z.number()), }); The submit function is a function (put) that accepts a number array ..read more