Sitelet https://web.archive.org/web/20191220050316/https://stackoverflow.com/questions/tagged/reactjs?tab=Newest
Podcast: We chat with Major League Hacking about all-nighters, cup stacking, and therapy dogs. Listen now.

Questions tagged [reactjs]

Ask Question

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It uses a declarative paradigm and aims to be both efficient and flexible.

178,371 questions
Newest
Active
Bountied
10
Unanswered
Filter by
Sorted by
Tagged with
0
votes
0answers
9 views

How can I improve this custom dropdown component I wrote to make it accessible?

I'm trying to write an accessible dropdown component using Reactjs and MaterialUI. The problem is that the component is not accessible. Tab navigation works for making the dropdown menu visible but I ...
0
votes
2answers
19 views

Perform HTML Input Validation on React Button Click

This is a simplified scenario. I have a form with a required input field and a button. The button has an onClick React handler and is of type "button". I want the browser to check the HTML fields and ...
-1
votes
0answers
19 views

Why react hook value is not updated in async function?

When running the run function, I expect that value variable has value 'new', but since even 500 ms, it still remains 'old'. Why that happens and how coud this issue be solved? import React, { ...
0
votes
0answers
6 views

React native bluetooth escpos printer Failed to generate APK

Trying to implement react-native-bluetooth-escpos-printer i can build the application successfully but cannt generate apk buildscript { ext { buildToolsVersion = "28.0.3" minSdkVersion = 16 ...
0
votes
0answers
11 views

How to drag input field in react?

I am trying to make same thing in react (my own custom plugin) same like this https://formbuilder.online/ I want to know how I will drag text field in dropable area. Here is my code https://...
0
votes
0answers
9 views

SonarQube with ReactJS - false positive on duplicates and coverage on new code

I'm trying to analyze ongoing ReactJS project using SonarQube (first time with that tool) version 6.7.5 but after second code scan I'm getting Quality Gate failed due to 0% Coverage on New Code and 5% ...
3
votes
0answers
54 views

Passing new Array instead of array literal to useState shows empty array

This is small issue but strange! let checkedlistarr = new Array(); for (var i in items){ //items size is 30 checkedlistarr.push(i) } const [selected, setSelected] = React.useState(...
0
votes
0answers
9 views

React-Router: Browser History Push Causes Component To Not Connect to React Store

I am having problem with React-Redux and React-Router and the connect function not mapping redux state to my props. Problem: In one component that uses redux store mapped to the component's props. ...
0
votes
0answers
5 views

how to listen to push notification event reactjs?

I am trying to display push notification with ReactJS. I've successfully display the push notification. But, I cannot detect/listen to the push event if the application receive any push notification, ...
0
votes
1answer
8 views

Combine API results from multiple arrays into a single array in a React.js component

I have the following React.js component where I get 10 multiple-choice trivia questions via an API call using fetch and recursively list them on the page via nested components. The API provides '...
0
votes
1answer
13 views

React app on gh pages showing 404s for static files

I know there have been a lot of questions for this topic but I've tried everything and still no luck. I have this in my index.js file const routing = ( <HashRouter basename={process.env....
-1
votes
0answers
10 views

Best Security Practices with Authorization Code Flow & React.js

I am building a project with both a web app built with React and Next.js and a native app built with React Native. I am looking for a second opinion on the best practice to handle Authorization for ...
0
votes
0answers
13 views

Ant Design Table Render calls function continuously

I have a table in ant. The table column has user Ids. I am using a function to take the id and look up the user's name. For some reason, react keeps calling the function continuously. render: (...
-2
votes
3answers
51 views

What does curly braces inside JSX means? If it means Javascript expression, then why it is giving error, “JSX element must have one parent element?”

I have written a code as follows: import React, {Component} from 'react'; import './App.css'; import Person from './Person/Person'; class App extends Component { state = { persons: [ {...
0
votes
0answers
18 views

ReactJs - Cannot find module 'lodash.template' - persistent error

I have had problem with this module. I tried this command: npm install --save lodash and apparently works fine, but I would like help figuring out why this persistent error occurs.
0
votes
0answers
12 views

res.download() giving “locale_file_path.empty() for locale” error

I want to create a button that starts downloading the file on user click. The name of the file I want to download is stored in e.target.parentElement.id. So, the idea is I pass the fileName to the ...
0
votes
1answer
42 views

setState not updating in useEffect

I have a simple component as follows: import React, {useEffect, useState} from 'react'; function App() { const [bus1Points, setBus1Points] = useState(); const updateBuses = () => { ...
0
votes
0answers
16 views

React navigate to child component on button click [duplicate]

I have a Journeys container connected to Redux that renders a Journey component in the form of card tiles on the /journeys page. Now, I want each Journey card tile to have 2 buttons - One that takes ...
0
votes
0answers
17 views

CORS Error for google Distance Matrix API - MERN Stack [duplicate]

I am trying to implement the distance matrix from google api to my app. I previously used this but only the client side. I have tried to implement the codes on the client side again by installing the ...
1
vote
1answer
21 views

CSS not changing when using React Router to route to another component

When I route my app to another component by using react-router-dom, the CSS doesn't change. This is a minimalistic version of the code to demonstrate App.js import React from 'react'; import Home ...
0
votes
0answers
16 views

How to change order of child component props array react native

Right now I'm using react-native-draggable-flatlist library with one flat list nested in another. The Parent component renders a list of users and each user row has a child component which takes in ...
1
vote
2answers
35 views

How to get late binding in Typescript

The following is a trivial React App component implemented in Javascript... import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { ...
0
votes
0answers
12 views

Storybook error: Cannot read property 'keys' of undefined

When I upgrade from 5.1.8 to 5.2.8, I see this error in Storybook: at http://localhost:9001/vendors~main.a7eddc7d95342429893f.bundle.js:25439:27 at render (http://localhost:9001/vendors~main....
1
vote
0answers
11 views

Need to append a subdirectory before “/static” in development

Apparently the solutions I keep coming across are meant for production and not development, thus they are not working. These solutions include any number of the following: index.html <base href="...
0
votes
1answer
13 views

Material size button size not changeable (React)

I am using Material-UI for React. This is the UI that I have so far, but I want to Submit button to have the same height as the Select component. I tried to give height: 100% to the button <...
-1
votes
3answers
28 views

Cannot console log api results in React

This could be the simplest thing, but my console log below is not working to see the api results, can anyone see why, I am new to React BTW. componentDidMount() { this.setState({ loading: true })...
0
votes
0answers
10 views

How to use spring boot java to properly use axios.post from React

So I am using axios.post on React here is my code React GenService.jsx import axios from "axios"; import { Route, withRouter } from "react-router-dom"; const COURSE_API_URL = "http://localhost:8080"...
0
votes
0answers
9 views

Apollo-client load and merge data from server seamlessly

Looking at the sample code: https://www.apollographql.com/docs/tutorial/mutations/ Lets say login form mutation returns the JWT token and also the user profile. Is there a way to save the user ...
0
votes
1answer
7 views

AmCharts4 disable radar chart resize/zoom

I have this AmCharts4 radar chart in my react application is there any way to disable the click-drag zooming? Thx. Image of the chart
2
votes
1answer
19 views

How to Hide navigation buttons in some steps on react stepzilla

I have five steps on react stepzilla but on first step I wanted to hide next button. I have tried: const steps = [ {name: 'Step 1', component: <PaginationPage1 showNavigation=...
0
votes
0answers
16 views

Why is extended stylesheet not rendering?

Brand new project. react-native-extended-stylesheet installed. everything working fine, and then out of nowhere it stops working. here's the full component: import React from 'react'; import { Image, ...
0
votes
0answers
12 views

How to create a drag and drop list out out list items using react-beautiful-dnd

I'm creating a UI that allows users to create a playlist out of files that they can load from their computer using input. It's working and looks like this: And here's my code for this: class ...
0
votes
1answer
16 views

How can I get the current route/path with typescript?

With normal react it would just be this.props.location.pathname. How do I do that with typescript?
0
votes
1answer
16 views

ReactJS - Importing store breaks Jest

I had a file with one function that creates an axiosInstance, it used to look like this: import Axios from 'axios'; import getToken from '@/api/auth-token'; const [apiUrl] = [window.variables.apiUrl]...
0
votes
0answers
6 views

Create a table with n number of columns and dynamic spacing in jspdf-autotable

How to create a table with n number of columns and specific width and spacing between the width
0
votes
0answers
11 views

Get a List buckets react components

I am trying to learn and produce something at the same time. This is an example of code for a component that should read buckets and produce a list of them. On the paper the console.log is working, ...
0
votes
1answer
16 views

Is there a way to change eslint rules for ejected create-react-app?

I am building an app with React and using NPM. I have set up my package.json like so { "name": "mouseflow-react", "version": "0.1.0", "private": true, "dependencies": { "@babel/core": "7....
0
votes
0answers
70 views

How to reset a component's state when the props change

I have a very simple component that looks like this: It takes a list as input and allows the user to cycle through the list. The component has the following code: import * as React from "...
-1
votes
0answers
24 views

Node is destroying live server [closed]

I am quite new to node and react and trying to learn on making small changes on my react website. However, I got node working and could start a local server. For some reason, when I stop the local ...
0
votes
0answers
19 views

Custom header on parent stack navigator with react-navigation

I have an app using react-navigation which has basically this structure: StackNavigator -> BottomTabBarNavigator -> (each tab) StackNavigator I am trying to add a global button component, it lived ...
0
votes
2answers
51 views

Remove Item on click in React

I have a names list which contains 3 names. On clicking any 1, you can edit and save. That value updates to the list. Now I can add how many ever names I want but I am not able to delete/remove any. ...
0
votes
0answers
12 views

React admin - create an instance of model with foreign key selection returns the ID of the FK as String, not as Int

When I send the form to the graphql mutation presented below. createQuestion(text: String!, symptom_id: Int!) : Question I get the error message: "Variable "$symptom_id" got invalid value "10"; ...
0
votes
1answer
30 views

fetch() delete method in react hooks (with context api)

I have problem with delete item from json server. Rigth now I have a component where I stateless func component I generate li's with item from api. In another compinent I have a form, where I can add ...
0
votes
2answers
22 views

ReactJS HREF Causes State Loss

I have a parent component called EnrollForm with a BrowserRouter that routes to different sub-components which are the pages of my overall EnrollForm. Each time a sub-component page is filled out ...
0
votes
0answers
8 views

Using Cognito Authentication with Elastic Load Balancer

I have a ReactJS front end website which uses AWS Cognito for authentication, this is working fine, I can sign in, up, out, etc. My back end is a set of Java web services running in Docker containers ...
0
votes
1answer
7 views

React, too much data on storage with AppSync (serverless app)

I have a React that works with AppSync for a serverless app (AWS). Til now, everything goes well, the app doesn't usee too much data (i don't know how many data is in MB, but let's say that the bigger ...
0
votes
2answers
30 views

React: Rendering Extra Components in Array Map

I'm a student and new to react. I'm creating a mind-tree with components rendering out of arrays, that will eventually have children of their own. I ran into this problem where an additional ...
0
votes
4answers
52 views

In react, how to remove specific item from list

I have a list that I've created as I add items to it: const addToPool = () => { setDiePool([ ...diePool, { dp1 : poolCount, dp2 : diceType, dp3 : ...
0
votes
1answer
19 views

React.useCallback: do I need to pass functions in array of dependencies along with dependencies?

React docs example shows only [a, b] as dependencies. Function doSomething is not passed. const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); But later docs ...
0
votes
1answer
26 views

Not able to see output of state using react hooks (useState) after fetch

I am fairly new to react so i am sure i am missing something very simple or way off. I am trying to complete a simple axios api fetch and set the response to a state. I am able to see the data in ...

1 2 3 4 5 … 3568