Questions tagged [reactjs]

React is a JavaScript library for building user interfaces. It uses a declarative paradigm and aims to be both efficient and flexible.

0
votes
0answers
10 views

How to create a setState wrapper that accepts arbitrary objects

I'm working with the setState method from REACT, and almost every setState call in my code looks something like the following: this.setState({..some_stuff...}, ()=> some_standard_method(this.state)...
0
votes
0answers
5 views

How to fix 501 error in HTTP Post request?

I'm trying to test the performance of my application with Postman. I created a react application which connects to Rinkeby Test Network(Blockchain) with web3. In a form below the user can create a ...
0
votes
0answers
3 views

How to use custom local strategy featherjs authentication

I'm trying to authenticate from a React app using a clientIdentifier from azure ad(since I only need to verify the user's identity). I generated the authentication service with the cli. the local ...
0
votes
1answer
9 views

Change disable attribute in react select with material UI

I am trying to change disable attribute in select on button click in react application using material ui My button code is: <AsistButton variant="outlined" color="primary" className={classes....
1
vote
0answers
16 views

How do I manipulate themes in React when printing?

I have three buttons that have a white background and dark text. When one button is selected, the text turns light grey and the background turns blue. When printing, the background turns white, so the ...
0
votes
2answers
13 views

Why won't useEffect run my API fetch anymore and save results to state?

GOALS: Note that examples used are not the exact context of my project, but are very similar, and therefore simplified for the sake of this post I am trying to use WP-API to use Wordpress categories,...
0
votes
1answer
22 views

How to Re-render a component when it changes it's props async

I am using React and Redux in a project I’ve two components a parent and a child. The parent component passes some props to the child when the child component receives those props it calls some ...
0
votes
1answer
11 views

(Basic) How to fix with React: TypeError: Cannot read property 'data' of undefined

I'm trying to connect my react page to my node server which is up and running. When I try to fetch the data, it calls it properly, but has problems displaying it to the react front page. I tried ...
0
votes
0answers
6 views

helper for getting the overridden style in enzyme?

We are creating wrappers for material UI and customizing the styles via CSS in JS with the help of makeStyles from @material-ui/styles. We need to make sure that correct styles are being applied ...
0
votes
0answers
6 views

Overriding Methods in React components - an antipattern, but how do I do it?

Believe me when I say that if I had any other choice, I would take it, but I am at my wits end. I'm working for a big corporation which already has a whole library dedicated to authorization. And ...
1
vote
0answers
27 views

create-react-app - installation being aborted

I am having a problem creating a react app using, I keep getting an error. I am using node v10.16.0 and npm v 6.9.0 I looked through many answers already and tried everything that has been suggested ...
0
votes
1answer
8 views

How to handle to index size error: The index is not in the allowed range?

I get the error in Safari - indexSizeError: The index is not in the allowed range. Could you explain what this error mean and how to handle this? It would be great if somebody provide an example how ...
2
votes
2answers
20 views

Calling a Component Via a Prop in ReactJS

I am creating a wrapper component for icons that I import using react-icons. Here is an example of how it looks right now: import { FaTwitter as Twitter} from 'react-icons/fa' import { Icon } from '....
0
votes
0answers
6 views

React Native localNotificationSchedule not working after app update iOS and Android - Push Notification

I uploaded an app to Google Play and AppStore that uses local Push-Notifications (https://github.com/zo0r/react-native-push-notification) to remind the users. Everything is working fine on both ...
-1
votes
1answer
16 views

Full page div overlapping full page sibling when resizing to mobile

The site consists of 3 stacked full page divs. When I resize my site to mobile sizes, one of the divs moves slightly on top of the previous div. If I make it even smaller, it completely overlaps the ...
0
votes
1answer
17 views

how to customize / overide antd styles?

Im trying to customize antd ant-row class within my form component so i can change the height between input fields. I have defined a different classname to my form and tried to do modify it in the ...
0
votes
0answers
7 views

react-scripts build failing when updating from 1.x to 3.0.1

I'm trying to migrate react-scripts from my current version (1.1.4) to the latest 3.0.1 for obvious reasons, but I'm having a hell of a time. Here's my current, build successful package.json { "...
0
votes
1answer
16 views

How to change the width of textarea when using TextArea tag

In antd library, inside a class named "ant-input", a field called "350px !important" fixed the width of textarea to 350px, and I can't overwrite this field. I searched the document provided by antd ...
0
votes
0answers
9 views

React: Vaadin grid sort column TypeError: Cannot call a class constructor without new

I would like to use the vaadin grid in a react project. Especially I‘m interessed in the sorting and filtering functionality which looks nice! So I tried to use the as described on the vaadin ...
0
votes
0answers
9 views

TableBody stripedRow does not work as expected

I am trying to have zebra striped pattern on my table and on reading the documentation I came across the stripedRow property but on trying to use the property, I run into Warning: React does not ...
0
votes
0answers
19 views

Invariant Violation error Object are not valid as a React Child

I'm trying to render a Segment, which will render a Photos or Reviews component, depending on which is selected. The renderSegments function is working and the console.log('Rendered Photos') is ...
-1
votes
2answers
37 views

How can I make this function synchronous with Asyn/await

I'm trying to make this code to be synchronous but for some reason async/await doesn't work.. Im working in React-native with two differents modules. I want to see my geolocation in googleMaps but it ...
0
votes
1answer
6 views

react-testing-library not rendering correct snapshots

I am trying to test a component against a snapshot. The component renders a checkbox with an onChange event and its checked state is linked to the component state which is set to true. When the ...
0
votes
0answers
5 views

Having unused 'mergedProps' parameter on 'connect' throws error on component rendering

I'm using Redux for my current Typescript React project and have a bit of a hard time to get into it. Connecting components works fine so far for me though. interface OwnProps { ownProp?: boolean;...
0
votes
0answers
15 views

How does REACT call a Private API Gateway?

According to AWS documentation, if you want to make your API Gateways private you need to put them behind a VPC Endpoint and either access them using Private DNS or pass the ID of the API Gateway as a ...
0
votes
0answers
9 views

react-intl, async translation import and SSR

I have a React app which uses react-intl to provide translations and it's working fine for browser DOM rendering. I have a component which deals with async locale/translation based on props it ...
0
votes
1answer
8 views

React Native meta appearances crash

I am very new to React Native, but I have successfully made a little app that just consists of 2 different screens using react-navigation library. My problem is that my App wont load when I try to ...
0
votes
1answer
22 views

print currently selected item when item clicked

I have this class using a picker from material ui. I am not able to print the currently selected item import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; ...
2
votes
0answers
16 views

Jest: How to mock custom module that is exported from an index.js file?

This is the structure of my project (create-react-app): Contents of /src/api/searchAPI.js: import client from './client'; async function searchMulti(query, options = {}) { options.query = query; ...
0
votes
0answers
8 views

How can image slider displaying more than 1 image at a time in slideshow in Reactjs?

I am creating a single page website in ReactJS, bytheway i am new on it. I have a problem about slide show. I want to see more than 1 image in slide section , for examaple, Can be shown 3 or 4 ...
0
votes
1answer
14 views

Material UI component `theme.spacing` not defined once built

I am building a Material-UI text editor using draft.js and wrapping all the functionality in Material-UI components. I've gotten comfortable using ~3.9 but for this project decided to update to 4.0. ...
0
votes
0answers
7 views

Is it possible to use ag-grid infinite scroll with react-redux and hooks?

I am using react-redux with hooks, and am trying to display data with ag-grid and infinite scroll work and haven't had any luck. I've made many attempts; here's what I have for now - import React, { ...
0
votes
1answer
11 views

How to Style React-Icons

I am trying to figure out how to style icons that I import using react-icons. In particular, I would like to be able to create a look similar to this: That is to say, I'd like to add a background ...
0
votes
0answers
11 views

Pulling nested GraphQL queries into react

I need to get the roll name and roll type in react. Here is my query... import gql from "graphql-tag"; const Person = gql` query Person{ Person{ id name roll { name ...
-2
votes
2answers
39 views

How to map a callback of map?

I'm trying to render a item and your respective subitems, this is my list: const labelList = [ { id: 1, tipo: 'Type 1', itens: [{ id: 1, nameItem: 'Item ...
0
votes
1answer
25 views

problem when adding new item to start of array in react

I'm facing a wired issue when adding a new item to the start of the array checkout the example class Demo extends React.Component { constructor(props) { super(props); ...
0
votes
0answers
6 views

Unit test for Connected component with componentDidCatch throws error

I have a ErrorHandler component in my react app that I wrap around other components to catch errors. The ErrorHandler is a Connected component. It calls a redux action to log errors that are caught. ...
0
votes
2answers
42 views

HTTP request is being blocked

I am working on multiple apps that communicate between each other. I am using Chrome and Firefox both to test my apps on. The problem seems to be persistent in both browsers. The problem: I am ...
2
votes
1answer
24 views

Updating props in Higher Order Components

I'm trying to toggle a radio button and update a prop to what current value it's set on. My Modal component is rendering a RadioButton component as so: <RadioButton currentValue={destination} ...
0
votes
3answers
22 views

Posting image to laravel with Axios only passing [object file] as string

I have a react app that is the frontend for a laravel application. I am using a simple image uploader that returns the uploaded file to a post route. In the controller for the post route the request ...
3
votes
2answers
34 views

Is it ok to pass the entire Redux state object into a React component?

We have a component which needs access to Redux's store. import React from 'react' import { connect } from 'react-redux' const Component = (props) => { ... code ... } We've connected this ...
0
votes
0answers
14 views

Why is build not being read in my package.json?

I'm trying to build an electron app with react, but my windows options are not being read. I first run react-scripts build to create the build folder. I then run npm run dist to run the build ...
0
votes
0answers
11 views

Routes organization with react-router and multiple components combination

I have been developing an WebApp that will be the possibility of user see multiple combination of components, how multiple headers, sidebars, mains and footers. I want sugestion of the best way to ...
0
votes
0answers
30 views

How can I dynamically set up multiple Spring instances?

Bit stuck trying to figure out how to setup multiple springs with React Spring, the springs will then be animated in a chain sequence. The idea is to fetch the length of each path present in the ...
1
vote
2answers
19 views

React: Perform different operation depending on select option dropdown

I have the following form in React. What I want to do is send a POST request if the option from the select tag, is Participate. <form action={this.props.action} method="POST" onSubmit={this....
0
votes
1answer
12 views

Change text of button that I clicked on

I have a few buttons on my component that are being rendered when I map through an array. There is a button for every item in the array. When I click on a specific button, I want the text for only ...
0
votes
0answers
10 views

TypeError using Materialize-CSS with React

i'm having a problem using Materialize-CSS carousel. The standard way to create the carousel is : <div class="carousel"> <a class="carousel-item" href="#one!"><img src="https://...
0
votes
1answer
14 views

How to focus on the end of input after changing value during focus

I'm building an autocomplete feature. Everything works as expected except when I reach the end of the input. When I change the value of the input, programatically, the input doesn't scroll/focus on ...
0
votes
0answers
9 views

Web app manifest: Downloaded file was empty or corrupted

I am developing a web app with react and want to include my own icon as icon I can click on my iPhone home screen (after clicking "Add to home screen in Safari"). You can find a Beta version here: ...
0
votes
1answer
7 views

Error: Problem with node not being found using enzyme. Method text

I am writing a small test for a PopUp component. However, I am getting this error: Method “text” is meant to be run on 1 node. 0 found instead. I am in the learning process, any help would be greatly ...