Tag: reactjs

React Countdown Timer unable to make a stop function

javascript react-hooks react-native reactjs

I am practically new to React. In this App I am using Hooks! I’ve made a Countdown Timer that will show in a few seconds after logging in. I am unable to make it stop on a button click. I need some advise on this as I’ve been struggling for the past 2 days with this. This is my code

Trouble installing Swiper in my React project

javascript node.js reactjs swiper.js

I’m trying to add Swiper to my React Web App, I’m having trouble with the regular plugin, so I decided to use this framework instead: swiper-react specifically designed for React. Following the getting started tutorial: It says that I need to import these CSS files but when I try to import them in…

Why `muted` attribute on video tag is ignored in React?

html javascript reactjs

Well, as counter-intuitive as it sounds, muted tag is somehow ignored; check out the snippet below, first one is rendered with react, the second one regular html; inspect them with your dev tools, and you see the react on doesn’t have muted attribute; I already tried muted={true}, muted=”true&#822…

NextJS – Appending a query param to a dynamic route

javascript next.js reactjs

In my NextJS app, I have a language selector that’s visible on every page. When I select a new language, I just want to replace the current URL by appending a query param lang=en to it. Here’s the function that replaces the URL: In this example, replace, query and pathname are coming from the next…

scrollIntoView onClick reactjs

javascript reactjs

hello I have a few buttons and I want to scroll to them when clicked. as you can see there´s a lot of scroll caused by those 2 divs. the idea is to scroll down and when you reach the buttons and click the one you need. the page scrolls to that button leaving it in the top of the

TypeError: (0 , _react.useEffect) is not a function

javascript parceljs react-hooks reactjs

when in the development environment, my app works just fine. When in the production environment it crashes with the error: Uncaught TypeError: (0 , _react.useEffect) is not a function It happens in a file I created where I import React and useEffect like so: adding a console.log just below this line confirms …

How to dynamically import SVG and render it inline

javascript reactjs webpack webpack-4

I have a function that takes some arguments and renders an SVG. I want to dynamically import that svg based on the name passed to the function. It looks like this: According to the webpack documentation for dynamic imports and the magic comment “eager”: “Generates no extra chunk. All modules…

How to convert Date format like this Fri Apr 20 2020 00:00:00 GMT+0530 (India Standard Time) to 2020-04-20T00:00:00.000Z in Javascript?

date javascript reactjs

I have a Date format like this “Fri Apr 20 2020 00:00:00 GMT+0530 (India Standard Time)” I want to convert that above format to this format 2020-04-20T00:00:00.000Z Actually I tried this JSON.stringify(new Date(“Fri Apr 20 2020 00:00:00 GMT+0530 (India Standard Time)”)) while using thi…

How to allow async functions in React + Babel?

babeljs javascript reactjs

I have a Typescript/React app, that can perform async function with a then/catch promise, but not with async/await/try/catch. The error is: Uncaught ReferenceError: regeneratorRuntime is not defined . The error seems to come from Babel. Here is my config: How to fix this? Answer You can find your solution at …