Category "reactjs"

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

using swiper in react js app that created by vite

i'am trying to use swiper js in my react js project that created with vite but it throws and error with this title : Failed to resolve import "swiper/css" from

How to display Mongo data in Front End in MERN

I am working in MERN Stack and i am stuck at a part where i have to display the data of MongoDB compass on the Web page in a designed way i am able to display a

Getting data attribute from root in ReactJs

I'm trying to grab the attribute listed in the div being rendered but it returns undefined. Any idea on how to go about it will be greatly appreciated index.htm

Update one property in MongoDB and update UI without refresh the page

I am trying to update one property Like I have a few properties, product name, price, quantity, supplier, and description. I am sending all the updated quantiti

How to avoid table header duplicates in react bootstrap?

My Table header is repeating. I have loaded some items from the mongodb database. Then I applied map. But it appears for every items new header is repeating its

Routing Inside Routed Components in React

I have an top level App componenet which contains and SideBar and MainBody. Here's my App Component, function App() { return ( <div className="pa

TypeError: (0 , _ethereum_Station__WEBPACK_IMPORTED_MODULE_4__.default) is not a function

I am unable to go ahead due to this error. This is the \stations\show.js file import React, { Component } from "react"; import { Card, Grid, Button } from "sem

Redux store is updated but view is not

I have the parent Posts.js component which map every object in posts array. In this function I try to filter all notes have same post_id as id of the current ma

Attach Access Token in API call Redux

Im sending id ,accessToken as a parameter to my API, they are redux store states, I want to attach my accessToken in my header.Authorization and send it togethe

How to push values into an array on submit btn click (react js)

I have a questions form with custom inputs. const Input = (props) => { return ( <div> <label className={classes.label}>{p