Category "reactjs"

Uncaught TypeError: Found non-callable @@iterator (react/typescript|esbuild-loader)

So i am trying to replace ts-loader with esbuild-loader in webpack, however it seems like as soon as I make the change, the page stops working. { test: /\.t

GraphQL + ReactJS throws Error 400: Bad Request

I've been stuck at trying to submit my form for a couple of days now. I constantly get hit with the following error: "POST http://localhost:5000/graphql 400 (Ba

How to animate visibility of mesh in react three fiber?

I have a 3D model. I have the access to the mesh. What I want is to animate the visibility on button click. When I press a button the mesh should be invisible b

My browser sends fetch data request continuously and it gives pending status after giving 200 several times in react

I'm trying post some data in mongodb database and it works perfectly until the fetch request is sending continuously even if I didn't do anything. In the networ

reading pathname from undefined using react router dom 6.3.0

I am using react-router-dom 6.3.0. Below are my routes inside App component <BrowserRouter> <Routes> <Route path='/article/*' element={<

React video won't load

I'm trying to make a carousel with movies in React, and when I hover on a movie I want the trailer to start, and show some details. Everything works fine, but t

How to let user choose from sample of images displayed on screen along with option to upload from device?

const [selectedFile, setSelectedFile] = useState(null); const [preview, setPreview] = useState(null); const [predictions, setPredictions] = useState([

How to import component as a button in Nextjs?

I have this component with an internal link which is used in multiple pages when I try to import it as a button in the Nextjs application I get this result, it

How can I checked only one checkebox at a time. when clicked one other will be unchecked

here is my code const handleCheckBox = (e) => { const { value, checked } = e.target; if (checked) { setFilter((filter) => [...filter, value]

How to make a step control component?

I have a component: import React from "react"; import styles from "./Clicker.module.scss"; class Clicker extends React.Component { constructor(props) { s

HTML canvas not drawing image

I have a react app but when I try to load an image is not drawing it on the canvas. Here is the code: import React , {useRef, useEffect, useState} from "react"

Rendering React SVG Components as images (using DATA URI)

Hi to optimize my huge svg components I'm tryin to do something similiar to this tutorial: https://medium.com/@ians/rendering-svgs-as-images-directly-in-react-a

Do JSON-Web Tokens (JWTs) cover both authentication and authorization?

I am researching on how to create a blog website that allows a user to sign in and based on his/her user role they can edit blogs, delete blogs, etc. but only i

Unexpected identifier and Unexpected token export when using babel standalone

I was trying using 'Babel standalone' to import module but getting Unexpected identifier and Unexpected token export, I can't figure it out why. Importing is fi

Make Swiper Slider Responsive in React.js

I want to make my Swiper Slider Responsive in React.js I am using Swiper React Components and I am new to this. I have added same width in media queries in css

Bypass login page in keycloak using access token

We have a requirement, where we need to bypass the login page and directly provide access to the user based on a token that has the email of the user. We are us

React Hooks: How can I use a hook to map an array from a dumb component

I have my api call in a React hook, like so: import { getAllTheBakeries } from './bakeries.api'; export const useBakeryList = () => { const [bakeries, set

React js unable to render when using graphql useQuery with parameters

I have already checked my imports and exports and also the graphql query that I have made... I use useState to handle the inputs on both username and password.

React-grid-layout - drag only on first div

I implemented react-grid-layout with two elements. The thing is I have text in the first element and because it is draggable I can't copy the text from it becau

Test onClick of a button is called when there is no props passed down to it using testing library react and jest

I have a component for an upload button which calls the ref of an input when clicked: import { useRef, FC } from 'react'; import Button from '@mui/lab/LoadingBu