Category "reactjs"

ReactJS useState hook: Can I update array of objects using the state variable itself?

I have: const [list, setList] = useState([]); Somewhere in the component, I want to do: list[index][someKey] = some_updated_value; setList(list); Is this

React MUI - Masonry mobile responsive

I'm new to react I'm trying to figure out how I can make a Masonry image grid - mobile resonsive. The idea is that I want the images to stack on top of each oth

Getting 403 Access Denied Errors When Hosting a SSG nextjs App in AWS S3 and CloudFront

I got a nextjs app with a couple static pages in a bucket being hosted on cloudfront and I ran into an interesting error. The pages are in s3 but if I refresh o

How to redirect to another page Reactjs/nextjs sending data with post

How can I send data using post I got this router.push({ pathname: "/investigacion-detalle", query: { data: JSON.stringify(salida),},

how to move placeholder to top on focus and while typing

I am trying to implement a simple input box where when I click on the box the placeholder value moves to the top but have an issue that it always shows on top.

In Next.js when fetching data from ghost CMS it ends up in 502 error only on first load

I'm using Heroku free plan to host the blog section of a website in Ghost CMS and use Next.js for the front(netlify) to fetch the data from it. On first loading

How I can show two nav.link while using a conditional operator?

My code: <Nav> { user?.uid ? <button onClick={() => handleSignout()}>Sign Out</button> : <Nav.Link as={Link

Regex validation for a specific value with React Formik

First is, I want to validate the field that if the user type a character that is not existing in this (e.g.): /[ùûüÿ€’“&

How can I load Google Tag Manager to a next.js app, AFTER the app is fully loaded?

I'm building a next.js application and would like to load Google Tag Manager (GTM) only AFTER the entire page is loaded. The goal behind this is to improve the

Build problem with React viteJS and was amplify

my question is quite simple to explain. I've initialized a React project with ViteJS and then added aws-amplify for the backend. I developed the project and eve

React/Jest - How to simulate touch "swipe" event

I have a component that triggers a function call whenever a swipe interaction was done. This swipe interaction can either be executed by touchEvent or mouseEven

county boundaries for US map with large data

I am trying to load all the county boundaries in the initial load. So I researched and found that loadGeoJson will support that. when I test with state boundari

Unable to center the content within a Material UI TableCell

I have TableCell which shows a status and a Button. I want them to be vertically stacked and centered in the cell. I am able to get either working separately bu

Redux store data being reset upon "getServerSideProps" being called; not persisting

Overview: I have a TypeScript NextJS project that I am using Redux-toolkit with to manage state. My file structure for my Redux store and pages are as follows:

React router 404 Error On (Litespeed Webserver)

I am building movie app, initialize with create-react-app. I am using react-router@5. I get 404 Error when route url on production (on Litespeed webserver) but

How to communicate between sibling components in React

How to transfer props from one sibling to another, please? In main app I have only 2 siblings: Input: import React from "react"; const Input = () => { ret

Linking requires a build-time setting `scheme` in the project's Expo config (app.config.js or app.json) for production apps [closed]

Linking requires a build-time setting scheme in the project's Expo config (app.config.js or app.json) for production apps, if it's left blank,

Jest test error: ...subscribe is not a function

I'm using Jest to test my Angular app (using Nx workspaces). I have a component that uses a service that I'm trying to mock. Here's the code: myDummyService.per

What I do for write math formulas in react draft wysiwyg?

I many times write about it. But I cannot get any help. How to write equations in react-draft-wysiwyg. I find good solution in [github][1]. But now cdn not work

Simple Peer on data stream throws process not defined error

I am trying to open a data channel using simple peer. I send the signal using Firebase and am able to get the on connect function to fire. const [thisPeer, setT