Questions tagged [reactjs]
React is a JavaScript library for building user interfaces. It uses a declarative, component-based paradigm and aims to be efficient and flexible.
442,909
questions
-1
votes
0
answers
7
views
Did the mapbox terminate its service in China?
We are developing it as a mapbox from the service we are currently implementing.
The mapbox China(mapbox.cn) site and webchat offical cannel were not accessible. May be that the mapbox service was ...
0
votes
0
answers
6
views
covert global token (function to class component)
I am trying to convert a function into a class component. The following code was part of the main function as
Const ProductDetail = () => {
const {
token: { colorBgContainer },
} = theme....
0
votes
0
answers
10
views
Why does auth.currentUser return null when there is a logged in user [duplicate]
So I was playing arround with onAuthStateChanged listeners, reading the firebase docs, the current user also can be gotten using auth.currentUser (in useEffect), when the Context provider mounts. ...
0
votes
0
answers
11
views
React is not displaying local image loaded from Json
Currently looking to load an image from a .json file into a another Json by using its path and linking a string of the path to the image Here is the Data Json. Currently the webpage "using npm ...
0
votes
0
answers
14
views
Redirect to Home if 404
Im using useRouter hook from nextjs:
const router = useRouter();
and I have a function that redirects user to a product page:
const handleGoToProduct = (slug) => {
router.push(slug, slug);
...
0
votes
0
answers
8
views
React testing custom hook with window.url
I have a custom hook that downloads a file from an url, it works fine and now I trying to test its behaviour.
const useFileDownload = ({ apiResponse, fileName }) => {
const ref = useRef(null)
...
0
votes
0
answers
9
views
I want fix SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
I'm working on connecting reect and restapi, but I'm still thinking about getting json in html.
useEffect(() => {
console.log('token : ', token)
if(token != null){
...
0
votes
1
answer
13
views
Proper on implementing incremental values
Now I know the title may be a bit vague so let me help you by explaining my current situation:
I have an array worth of 100 object, which in turn contain a number between 0 and 1. I want to loop ...
0
votes
0
answers
8
views
How to get state name from function argument when using setState in React [duplicate]
I have the following state in my React Component:
class App extends Component {
constructor(props) {
super(props);
this.state = {
temperatureBedroom: 22.0,
...
0
votes
0
answers
12
views
Transform data before plotting
I have an array of objects:
const data = [
{
// Header row
recordId: 'recordId',
recordedDate: 'recordedDate',
QID3: 'Pineapples do not belong on a pizza',
QID4: 'Which one is ...
0
votes
0
answers
20
views
Tic-tac-toe React game not displaying background color as intended
I want to implement a feature for the React Tic-tac-toe game as said on the new React beta docs site. The feature is to highlight the winning squares on the board if a player wins. Having struggled ...
0
votes
0
answers
9
views
How do I text my Todo components when using db.json file?
All I am trying to do is test my components to make sure when I add the todo it sends it to the todo list.
In my main code I Post it to the db.json file, like so
const addTask = async (task) => {
...
0
votes
0
answers
4
views
Build failed for rescuing Gradle/Buck/react/Android/Fastlane project - More than one variant of project [...] matches the consumer attributes
I try to revive an old React/Gradle/Buck/Android/Fastlane project for a friend whose developer moved whithout telling anybody anything.
The task was just to change the server of the app, but well I ...
0
votes
1
answer
26
views
document.title doesn't update in React Lifecycle Hook
In a simplified example, I am renaming the page's title after componentDidUpdate gets triggered (for instance, via a prop change)
componentDidUpdate() {
document.title = "Some Custom Title"...
0
votes
0
answers
6
views
Could not resolve dependency: npm ERR! peer react@"^15.0.0 || ^16.0.0" from react-typical@0.1.3 npm
While trying to install npm install , I am getting below error, could someone please advise, what is the best approach to resolve the problem. Due to this error, my build is getting failed in Heroku.
...
0
votes
2
answers
21
views
Invalid hook call. Hooks can only be called inside of the body of a function component when creating a new component
When I try to create an element of my "Question" type, like this from an external component:
const current = Question();
Being the Question component as follows:
export const Question = () =...
-1
votes
0
answers
13
views
REACT: "Error: Failed to fetch" when running npm start
enter image description here
I am new to REACT and I keep getting, "Error: Failed to fetch". On the terminal, it says that it compiled successfully, but is not successful whenever I go onto ...
0
votes
1
answer
21
views
import { styled } from '@mui/material/styles'; displayName not showing
Using Mui styled function to style both jsx elements and MUI components. The displayName is not showing when I debug the element in Chrome or any browser for that matter.
Anyone know how to fix this.
...
0
votes
0
answers
17
views
Where should the error appear for a stylesheet typo in a react app?
First off; I have corrected the misspelt stylesheet name and my app works, now, I just need to find the error.
I'm working through the Pro MERN Stack, 2nd Edition book and I have completed up to the ...
0
votes
0
answers
6
views
Gyp error while trying to install yarn package
I need help with installing package for my school project. The command was: yarn add bluetooth-obd but I can't get it working. I've already fixed many errors, but I am stuck quite a bit now. Can ...
-1
votes
0
answers
10
views
What is the recommended way to store and call multiple images in a React project?
I'm creating a simple e-commerce React project that will display multiple images (50-60 max). Now, I can save these locally and add them to the project file and then reference as normal as <img src=...
0
votes
0
answers
17
views
how to use effects in style inside a tag in react
currently when you want to do something in react, like some effect using css, you do it as follows
h1:houver{ continuity... }
but I want to be able to do this inside a style tag as follows
<div
...
0
votes
0
answers
9
views
Jest test for scrolling events does not appear to be calling the callback
This is my ScrollWatcher.tsx component
import { useEffect } from 'react';
interface Props {
onReachBottom: () => void;
}
export const ScrollWatcher = ({ onReachBottom }: Props) => {
...
0
votes
0
answers
13
views
Trying to use react-pdf with typescript
I have a React app built with craco that I want to add react-pdf to display PDF files in a react component.
I'm getting the following error:
I've added the following to the craco.config.js file which ...
-1
votes
1
answer
33
views
Set loading with React useEffect fails
I'm trying to show a loading spinner while fetching data from an api, and show error or results once finished using useEffect. For some reason isLoading is set to false before fetching is finished.
...
-3
votes
0
answers
22
views
Getting number sets of 12 numbers in an array and wanted to map first six and then last 6 numbers, by using same component or recursively in reactjs? [closed]
const arr = [2, 4, 5, 4, 9, 6, 56, 67, 87, 5, 43, 3];
example:
Half yearly data:
2
4
5
4
9
6
Half yearly data:
56
67
87
5
43
3
Working on a project and getting number sets of 12 numbers in an ...
0
votes
0
answers
10
views
state does not update using useContext even if works in another app
Im trying to build an application where I am using useState and then passing it using context. But whenever I try onCLick increment it doesnot work. state update does not happen.
Here is the state ...
0
votes
0
answers
13
views
Can frontend applications upload files directly to Google Cloud Storage without a middle tier?
I'm trying to build a a web app that does some image/pdf processing. the intent is to allow users to upload a file and get some response back.
My frontend stack is React and I'm using GCP Storage ...
1
vote
0
answers
20
views
How to type property based on other prop with Typescript and React?
How to make an intelligent prop type? I have Alert component which has some actions. Those actions can be clickable, there are some different components like Button or Link.
I would like to achieve ...
1
vote
1
answer
21
views
When trying to run folder with "npm run dev" and getting "node:internal/modules/cjs/loader:1050"
I am trying to run a folder using npm run dev and I keep getting the same error.
PS C:\Users\My Name\Desktop\My Folder> npm run dev
Debugger attached.
> elagant-music-app@0.0.0 dev
> vite
'...
0
votes
1
answer
22
views
After removing the text area, not able to add again or add other options in a react app
On click on the Text Area, button should add relevant text area in a pag. By clicking on the close button, system should remove the added textarea in a React page. By default, the close button shouldn'...
0
votes
1
answer
14
views
Getting a weird black box under the screen in react native tab navigator
This is my code
const Tab = createMaterialTopTabNavigator();
<View
style={{
backgroundColor: "black",
flex: 1,
paddingTop: paddingTopForAndroid,
}}
>
<Tab.Navigator
...
0
votes
0
answers
11
views
data is undefined on first page load only
I'm using Redux to create 2 API calls that retrieve an array of objects for incomes, and another one for expenses.
When I login, I want to display data, but on first load I get error TypeError: Cannot ...
0
votes
0
answers
6
views
How to programmatically set focus to react select options triggered by a separate Input field?
I want to use react-select just for it's dropdown (not its select input), so having my own input and when a user focuses on it, it should focus on the react-select dropdown and allow arrow navigation.
...
0
votes
0
answers
15
views
How to write a test for the onCLick set a prop?
I have react component, where I want to test If onClick renders when the title is clicked.
Here is the component:
const Dropdown = ({ children, text, color, activeColor }) => {
const [isActive, ...
-1
votes
0
answers
11
views
Uncaught TypeError: Cannot read properties of null (reading 'classList') at window. Onload [duplicate]
I'm working in a React.js application. I was trying to convert a HTML code into React.
However, the preloader is not working and get this error.
Here is my entire code in App.js:
/* eslint-disable no-...
0
votes
0
answers
10
views
React: async data loading leads to mixed component state
I have a (simplified) component like this:
<Page id="1" color="red" />
Where some props (e.g. id) are used to fetch data from remote API, and some props are purely for ...
0
votes
0
answers
3
views
React Framer Motion. Simple drag with overriding position when button pressed
I want to have drag with dragConstraints. And it works fine. But also I want to change draggable block position from outside. For example if I click button, then block should automatically smoothly go ...
0
votes
1
answer
10
views
Is it possible to run react-scripts start from within another directory that has a public folder but not a package.json file?
yarn version: 1.22.19
package.json file in the myapp dir:
"main": "server/index.js",
...
"dependencies": {
"concurrently": "^6.2.2",
...
&...
0
votes
1
answer
26
views
Error "Table has no columns." Does anyone help me?
Error "Table has no columns."
It's not returning the API data in the React-google-Charts chart and I can't find the error, anyone to help me? I already broke my head here... It's a Column ...
0
votes
1
answer
18
views
simplifying e.target for loop with an if statement
I have a form with activity checkboxes set up and am working on a POST request where the id's of the checked boxes are being sent as an array of numbers. How would I simplify this for loop?
const ...
-1
votes
0
answers
20
views
React-Router-DOM@6.3.0 does not render child components
I am trying to configure a route child to an existing work route.
I have 3 main routes that work perfectly, and one of them has 1 child.
/
/dashboard
/auth
3.1 /auth/login
this is my routes object:
...
-1
votes
0
answers
12
views
Tailwind CSS not working inside my React project
I followed the whole tailwindcss installation process and my app is running fine and no errors but tailwind css still isn't working for me. No changes effect on my text or components
I've made edits ...
-2
votes
0
answers
15
views
Why does switching tabs change the page of my react router dom app?
Good day community, I have a problem I am making a small application with react and react router dom but I have a problem what happens is the following I have a signIn page, another success page and ...
1
vote
1
answer
13
views
null is not an object (evaluating 'RNSound.IsAndroid')
i tried to play a sound using react native but i got this problem when i run the app :
TypeError: null is not an object (evaluating 'RNSound.IsAndroid')
, i think that that this problem caused by the ...
0
votes
1
answer
19
views
React functional component update state by key
Within a Component Class, I found it easy to create one handler that did a lot of heavy lifting for form inputs. By matching the name of the input to the this.state.key, I was able to update specific ...
0
votes
0
answers
3
views
Does anyone have this error while creating a TSDX project?
I want to try using TSDX but whenever I try to create a new TSDX project using :
npx tsdx create 'name'
my cmd get stuck on modules installation like this :
enter image description here
Anyone knows ...
1
vote
1
answer
12
views
Axios Network Error, ERR_CONNECTION_REFUSED: React/Node app runs fine locally but getting error in Heroku production
I have a React/Node app that posts to MongoDB Atlas using Axios. Locally, the app makes calls successfully, but after deploying it on Heroku, I'm getting the following error message in the console:
...
0
votes
1
answer
12
views
How do you grab the value of an optgroup in React
I have a select dropdown menu that is split by optgroups. For my on change function I also want to record which optgroup the option was picked from. The options are dynamically rendered. I can easily ...
0
votes
0
answers
8
views
in React Application, my loader take Infinite load time on mobile device but in pc work properly
in React Application, my loader take Infinite load time on mobile device but in pc work properly.
const [loading, setLoading] = useState(true);
const handleLoading = () => setLoading(false);
...