I have a route: <Route path="/users/:userId?/:edit?" element={(<Users />)} /> Users is a layout component where I deside what to render based on params. I have a 2 options in this component: If there're no params, then render UsersList component. If…
I have a progress bar the value should be from 0.1 to 1. but sometimes progressValue will over 1, for example refresh the page. Why ? https://codesandbox.io/p/devbox/g9wwqf?file=%2Fsrc%2FApp.jsx%3A6%2C1 import "./styles.css"; import axios from "axios"; import { useState, useEffect } from "react";…
I'm trying to show image in next js using import Image from 'next/image'; without specifying width and height. Note that image is coming from URL and not from specific folder in project. <Image sizes={"100vw"} width={0} height={0} src={'https://picsum.photos/200/300'} placeholder='empty' /> This…
I have a JSON object which is deeply nested. I want to display input fields with respect to the JSON values. To traverse through the deeply nested JSON object I used recursion and collected all processed input fields to set…
I want to create an input React component for a monetary amount and I would like the placeholder to be 0.00 but upon typing, the value should be updated digit by digit without the need to type a .. So,…
I've been struggling with styled components and transient props. See code below. I have a styled component, let's call it StyledLabel, that receives a transient prop. The StyledLabel is used in a function component, let's call it IntermediateLabel. The IntermediateLabel…
I want to open a select box when it gets focus. I'm using React hooks with useRef. I found several solutions with using ref.current.click(). But it is not working as expected. Am I doing something wrong? Here is the simplified…
I am working with a React app (create using create-react-app) and using Node.js v.20.11.1 and when I try to send a POST request from my React app to my Node.js backend, the URL isn't proxied properly. I have tried using…
I created a Higher Order Component (HOC) or Container component from where I am fetching data and sending to child component. I am also using React-Router-DOM library for routing. I am using HOC component like this: <BrowserRouter> <Routes> <Route path={'/'}…
Currently i'm running node -v v22.0.0 Here I'm creating a new React Js porject. but when initiating the project with vite technology, it errors like this in the terminal. npm create vite@latest node:internal/modules/cjs/loader:1205 throw err; ^ Error: Cannot find module…