Category "reactjs"

React FileBase64 Styling

How can I style Filebase input button? It looks very ugly and I don't know how customize it... This is what I have: <FileBase type="file" multiple

Next.js ISR pass additional data to getStaticProps from getStaticPaths

In SingleBlogPost.jsx i have: export async function getStaticPaths() { const res = await fetch("http://localhost:1337/api/posts"); let { data } = await res.

raster tiles from a custom source in ReactMapGL

I'm new to ReactMapGL library, I need to load openweathermap data on Mapbox map using ReactMapGL library following the way I have tried but it is not successful

how to remove WebKitFormBoundary from uploaded file

I'm trying to upload a Webvvt file using multipart/form-data, and the problem is that when I send the file to api, the file contain WebKitFormBoundary header an

Unable to render text in arabic using React-pdf

I am trying to display Arabic text in pdf using react-pdf but it shows un-appropriate text Following is the text in png that I have tried to show in Arabic and

React Router Dom v6 - Image not found in nested routes

In my tsconfig.json file, I have a "compilerOptions":{baseUrl} that enables me to look for images in public/images/foo.png like this <img src='images/foo.png

React Router: Conditional redirect if not query parameter present

I am trying to do a conditional redirect, if there is no 'state' query parameter in the url, I want to redirect to an error page. I am trying to do it in my App

Button onClick not working in React x Laravel

Hello everyone i am quite lost right now, in my other react projects onClick is working just fine but now with my new app laravel with react i cannot do an Oncl

How to enable/disable multiple rows delete button of Material Ui data table

Using Material UI datatable which has everything searching , pagination and multiple rows delete option. Refer from https://openbase.com/js/mui-datatables/docum

Using Web Workers with React and Webpack 5

I have been trying to use Web Workers with react for a few days and I ran into a few issues. I started with a create-react-app using webpack 4. I could use a we

ERROR 'MODULE_NOT_FOUND' after install npm i react-multi-select-component

ERROR 'MODULE_NOT_FOUND' after I install npm i react-multi-select-component. How can I fix? node:internal/modules/cjs/loader:939 const err = new Error(message);

Redux Toolkit doesn't work well with WebStorm

I'm learning Redux and Redux Toolkit, but I don't understand why autocomplete doesn't work when I'm trying to dispatch an action (see the image below). I import

useSelector returns undefined - react-redux

I'm using react-redux. createSlice: import { createSlice } from "@reduxjs/toolkit"; const datatableSlice = createSlice({ name: "datatable", initialStat

Error when trying to run dev server | React, SSR

I got this error when I'm trying to run server: E:...\node_modules\ts-loader\dist\watch-run.js:29 for (const [filePath, date] of times) { ^ TypeError: times is

Position labels in radial charts - react-vis

I am struggling with positioning labels in radial charts using the react-vis library. Here is my code: const DonutChart = () => { const data = [{ angle:

NextJS - Too Many Open Files Error in Production

I'm facing an issue in my Production environment during peak traffic hours. Any help on identifying the source of this error would be really appreciated. Error

Window.open() to trigger phone SMS/Call/Email app not working in Chrome on Android on Page Load - Using ReactJS

This is my code snippet. else if (item.title === 'Text') { try { window.open(`sms:${item.link}`,'_self') } catch

How can I aggregate/pivot this non-numeric data to show in a chart?

I'd like to show some data on a line chart. The source data looks like this: [ { date: 1, depth: 1, river: 'trent',

react-router-dom NavLink doesn't reflect isActive change without refreshing the page

I'm trying to use the NavLink's isActive prop to check whether the link's route is the current route to apply some visual styling. Whenever I navigate to a page

ESIDIR Error in NextJs, even if the code come from the official page

I need to learn Next.js for an interview, so I started to follow the tutorial published in Next.js official web page. It was all ok, until I arrived at this sec