Newest 'reactjs' Questions - Stack Overflow

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
5 views

How to pass delete id while using map in map function

How can I pass the delete id while using the handleClick map in map function? In the case I can handle the joins table records, suppose I want to delete a record from child table how can I handle ...
0
votes
0answers
6 views

How to store and retrieve files with MySQL for React/Node.js

I'm going to try and make the question less subjective here. About my project: Users can upload Avatar images and Audio files (using multer for uploads) Currently the uploaded file just gets stored ...
1
vote
1answer
9 views

Insert auto-slash for date in mm/dd/yyyy format for “react-datepicker”

I am using react-datepicker in my project. The required format is mm/dd/yyyy. What I want is ,if I want to type a date it,should be in date format. Eg: I want the date 21st Jan 19880. When I pick ...
0
votes
1answer
26 views

How to declare an array with objects in the state ReactJS

I am wondering how to make new blank array with objects in the state and how to add element in it with setState. I want the array so: newhosts: [ { activityState : "", platform: "",...
-1
votes
0answers
7 views

why unexpected token operator error from UglifyJs?

ERROR in client.js from UglifyJs Unexpected token operator «=», expected punc «,». Webpack is 3. Didn't understand what the issue.
0
votes
0answers
8 views

How to fix problem with createGenerateClassName() and jssPreset() when migrating from material-ui v3 to v4?

Had material-ui v3 working on a messaging app and was using createGenerateClassName() and jssPreset() to configure the JSS to allow for right-to-left text direction. Upon upgrading to material-ui v4, ...
0
votes
1answer
35 views

React Hooks: Is there a way to calculate state values based on another state value

I'm looking for a way to calculate state values which depend on other state values using React Hooks. I'm familiarizing myself with React Hooks. So far I've been using useState and useEffect. I'm ...
0
votes
1answer
21 views

ReactJs return raw data

I am using React to render some components. The code looks like this: render() { return ( <div className='sources row-fluid top-logo-boxes'> <div ...
0
votes
2answers
15 views

Not able to show login/logout button on header dynamically based on token presence

I am learning React.js and has stumbled upon this problem. I have kept login and header component separate. With success login i want to see 'Logout' button in header. The way i am coding, its showing ...
0
votes
0answers
30 views

Why not make axios calls in the constructor?

It's common knowledge that you should make api calls in your componentDidMount to grab data for a React component if you need that data on load. My question that I haven't been able to find a real ...
0
votes
0answers
10 views

how to retrieve response data when unit testing async redux action

I'm trying to make this test, test the getImages action function. I'm getting this error ● should getImages from action function › should getImages from action function expect(received).toEqual(...
0
votes
1answer
16 views

I can't use javascript imports with in my react-typescript project

I am trying to add a google login feature with firebase. I am using react hooks and typescript. I cant seem to use the StyledFirebaseAuth module. when i try to render it, it gives this error JSX ...
0
votes
3answers
88 views

this.state.xxx.map is not a function

I'm trying to display data from the state, but when I try to map data, there's an error saying this.state.xxx.map is not a function import React, { Component } from 'react'; import axios from '...
0
votes
1answer
18 views

Why am I getting an error with cors in ExpressJS in one case, but not the other?

I'm setting up a database and connecting it to some routes. I've managed to get it to work for one route but not the other. The 'register' route works but the 'login' route doesn't. When I try to run ...
0
votes
2answers
22 views

React hook to wait until the previous call is complete

I am working on a react project which uses hooks. And I was assigned a task "change the useInterval hook, or create a new one (usePoll?). This should operate the same as useInterval, but should wait ...
0
votes
0answers
31 views

How to update input field values when the state changes in a stateless component?

I have a stateless component and I have a form and some input fields, the problem is when the state changes, it is updating the state but inside the functional component it is not updating the state ...
0
votes
0answers
9 views

Webpack programmatically replace a child module

I have a standard React app, within which I'm trying to build in a storybook for the standard UI components. Because the way some components are structured, they are making API calls to a server (it's ...
0
votes
1answer
25 views

What must be done on backend server and what on client

I have situation, I need to download some data let's say X gigs(huge data) on client machine using browser's native js. Then I need to run compute extensive job tasks(tensorFlow like computation) on ...
0
votes
0answers
21 views

Redux doesn't fetch data from API request

I'm new to React/Redux. I'm making an app using an API but the code doesn't work. When I run the code it says "this.props.recipes.map is not a function" and doesn't render anything. If I change ...
0
votes
0answers
12 views

how to make antd Drawer's width equal to its parent node instead of browser's width

I need Drawer popup from its parent's bottom and have the inherit width, but the parent's width is not constants, which means I cannot just set a fixed width for Drawer
0
votes
2answers
14 views

react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys

I'm super confused here, I'm trying to follow this question yet keep getting the error objects aren't valid as a react child. Or property is undefined. The api response should be something like [{...
0
votes
0answers
10 views

What are the best practices to combine SVG and JPG? (React)

I am looking for the best way to code the following design: mockup with irregular SVG frames I am not sure if it's better to create one project in 1 SVG that includes both SVG frame and JPG mockup ...
0
votes
1answer
21 views

test count of react components within a component

I have a form in which I have two Select Components. I am trying to write a test to check if Form is rendering both the components. short code snippet for FormComponent: export class FormComponent ...
0
votes
2answers
17 views

ReactJS values of Const on div

I'm new on react and have a simple application as this: My purpose for this app it's to consume an Spring Boot REST Service and print the data json on my react app. I achieve this following this ...
1
vote
1answer
24 views

How to style the active link childs using CSS in JS and React Router?

I am using React ROuter and CSS in JS for style. I'd like to change the background color and border color for the active links child divs (navIndicator and innerIndicator) import { css, StyleSheet } ...
0
votes
0answers
11 views

3 Columns on one page with highlight functionalitly

I am building a webpage and I would like to have three separate columns with highlight functionality on them so when the mouse scrolls over them it lights up the background and slightly zooms in.. im ...
0
votes
1answer
15 views

Why not maintain state in localStorage if redux loses state on refresh?

If the one of the solution to maintain a redux state is store it in localStorage, then . why not maintain the state in the localStorage instead.
0
votes
2answers
21 views

Using image urls vs importing images locally

Is it generally better performing to use an image by referencing it with an url or by downloading it, saving it to some directory, and then importing it in a component? Eg <img src="images.google....
0
votes
2answers
22 views

How do I store the current value from a useState variable in an array?

After an onClick event fires, I call the setInterval function which in turn calls a function to set the value for a variable picked randomly from an array of 4 values (4 different colors). I need to ...
0
votes
1answer
21 views

React useState - how to put array of objects into state

I've got a React app which I'm pulling data down from a RESTful API. The data in the response is an array of objects. I'm trying to get that information and store it in React state using useState and ...
0
votes
1answer
10 views

Best practice to show Apollo Client Query loading outside of Query Component?

I want to show loading indicator outside of my query component. Right now i'm using redux and when i start loading data from api, i set redux state attribute which i then use to show loader ...
0
votes
0answers
20 views

Add function to createElement

I study react and now I try to solve the problem, but I don’t know how to do it, I will make a function that opens the giftbox, made a function that makes confit, they work separately from each other, ...
0
votes
0answers
6 views

Using styled-components with imported CSS files from a node_module

I am using styled-components in a React project. So far it has been working fine, but now I want to use the react-datepicker package, which requires its styles to be imported the following way: ...
1
vote
0answers
3 views

Adding a geojsonlayer for react

I have some geojson data that I have created from a gtfs realtime feed, I am trying to add it to a mapbox map. My Map currently displays fine and I can get it to render markers, however I am having ...
0
votes
0answers
6 views

How to fix `Content-Security-Policy: default-src 'none'` on going to a subpath in React Node Express app?

My React app runs on Node Express, and uses React Router. Going to a subpath e.g. /sub works fine in dev mode served by parcel, but when run in production mode using node ./, I get error on page: ...
0
votes
0answers
9 views

Amcharts4 zoomtoIndexes(start_index, end_index) not zooming the chart axes

I am trying to zoom the amchart4 using "zoomToIndexes()" function. When I try to use this function with chart object, it doesn't do anything and sometimes refreshes the page. I am using it as a React ...
0
votes
1answer
16 views

function App() vs class App extends Component in the App.js file

I'm following a tutorial on React (https://www.youtube.com/watch?v=sBws8MSXN7A - dated January 3, 2019) and created a React app with npx create-react-app *app_name*. The App.js file this command ...
0
votes
0answers
15 views

How to use nested Web Components created by Stenciljs in React

I have a repository with Stencil.js and I create a couple of web components, nested and working in Stencil development environment. in example I have a parent component that use a child component: ...
0
votes
1answer
13 views

Jest test does not fail on error while rendering

I'm trying to fix some unit test that passes regardless of what happens in the rendering. import React from 'react'; import Component from './Component'; describe('Basic component tests', () => { ...
0
votes
3answers
22 views

React - adding email validation to empty input validation

In React, I'm looking to add email validation (checks for @ and .com) to a form that currently checks for empty input fields. I found this that does the job but can't figure out how to connect it to ...
1
vote
2answers
16 views

Invalidating/Refreshing the Redux store in a React web app?

We are in the middle of migrating a fairly complex web app over to a React/Redux architecture. One major design question i have not been able to find an answer for, is how is data stored in redux ...
0
votes
0answers
15 views

How can I download different files from my REST API?

I have got a REST API which stores files. Now I would like to make the files downloadable from my API but I do not know how to make this. The files which the user could send to the user isn't specific,...
1
vote
1answer
19 views

How do I transition animation before React rerenders?

I have a custom checkbox like so: https://codesandbox.io/s/throbbing-resonance-09dii Based on this codepen: https://codepen.io/Sambego/pen/yiruz input:checked:before { transition: transform 2s ...
0
votes
0answers
8 views

Expand subcomponent rows by default with react-table

I am using react-table to display some rows, each row has a subcomponent, which just renders some more "subrows." However, you have to click the row in order to show the subrows. React-table does not ...
1
vote
0answers
13 views

Environment Config Files with Create React App

I'm building a React / TypeScript app via Create React App and am looking to include environment specific configuration in a type safe way. Caveat, I really would rather not eject the app. Ideally, I ...
0
votes
1answer
10 views

Getting state from root component - react.js

I am at the very beginning of learning react and I need too take state from root component to the child of a child, I can say. I have got App.js file, which has state, that is an array of players. ...
0
votes
0answers
13 views

Moment incorrect date time

I am trying to convert time to local time but I get wrong local time to start with. I have looked online, tried multiple things but no matter what I try, I get the wrong time and wrong UTC time. ...
0
votes
2answers
27 views

Why I cannot type continuously in react Input field when passing values to another component using props

I am trying to pass values through props from one component to another. Parent component is InstructorLoginForm and child component is InstructorLoginFormComponent Everything works fine but the ...
0
votes
1answer
18 views

How to apply :active style to a Card based the Active Index in the Carousel?

I have a carousel of 3 images, and 3 Cards in a Card Group that correspond to each other. If I click Card 2, the Carousel changes to Slide 2. The Carousel also Autoplays. How can I get my ....
1
vote
2answers
25 views

Proper TypeScript type for creating JSX element from string

I have a component that I want to default to being rendered as an h2. I'd like the consumer to be able to specify a different element if they desire. The code below results in the error: TS2604 - JSX ...