Join us in building a kind, collaborative learning community via our updated Code of Conduct.

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

How to horizontally align card elements (rmwc) in React?

In my parent component: { this.state.projectList.map(dat => <Item data = {dat}/>) } in the child component Item render() { return ( <div style={{'...
0
votes
2answers
11 views

Iterating over array of objects with react

I have a data object that I need to be able to iterate over which is an array of objects. I'm attempting to do so with Object.keys, but missing something with my implementation, as I get the error ...
1
vote
1answer
11 views

Multiple dropdowns without repeating code in ReactJS

I have created dropdown onMouseOver with help of state. So far its working good enough. Because i don't have much knowledge about ReactJS i'm not sure is it possible to make multiple dropdowns with ...
0
votes
0answers
5 views

React-Apollo\Javascript: Map function or logic might be wrong

In the console I am seeing the following data structure. So it appears I am getting data. However, I am trying to graph the data using the following class but the screen is blank. I am not sure what ...
3
votes
0answers
18 views

Why are default states on redux initialized to false instead of empties?

I am not sure if this is common practice, but while I was going through the highly popular react-boilerplate app I noticed that the default value of the store keys were always getting set to false ...
1
vote
2answers
19 views

axios get request for local data redux

I have a data file with a javascript object in that I would like to store in redux state, I have an axios request function that works with an api but I want to be able to fetch a local file from my ...
2
votes
0answers
15 views

Performance issue with React deployment on AWS S3

I have built and deployed React app (let's call it app A) on S3 and enabled "Static website hosting" for it. This app was earlier running on an EC2 instance using Node. Recently, someone from the team ...
2
votes
0answers
16 views

Dynamic import inside each list item and Webpack 4 chunkFilename

I am doing a dynamic import inside my list item component. Fine! Now, I have only two images namely male.png and female.png inside my component itself. Problem is when webpack processes these two ...
5
votes
1answer
18 views

How to call methods in react-visjs-timeline

Using react-visjs-timeline, how are methods called to the Timeline component? Methods like: timeline.fit(); timeline.setItems({...}); timeline.focus(id); I added a ref to the component, but I'm not ...
0
votes
0answers
18 views

React select values not remaining selected

I am trying to create a select dropdown that onChange updates all the select dropdowns in the table. State is being set correctly. However when I change any of the selects in the table the value ...
0
votes
0answers
16 views

Can't page break to work without messing up the table formatting

Been having issues with page breaks in tables for a long time now. Thought I had a solution as it was working fine in this SO question: Inserting a page break into of <table> in React app This ...
0
votes
0answers
38 views

Sharing state between React components

I have a table component (parent) and in each row of the table, there's another component that's basically an image button (child). When clicked, the image button switches from its default three ...
1
vote
1answer
17 views

react-quill custom save button to firebase

Okay, so I am trying to build a react based notes application that saves to firebase. I'm using react-quill as my text editor and currently, I am having trouble sending the data of the editor off to ...
0
votes
1answer
14 views

React async login with social media

Im trying to add a login with social media on my website but I got some erros because the case is returning first than my http request(firebase) 'firebase.auth().signInWithPopup' how can I use async ...
0
votes
0answers
11 views

React Native - Why does onLayout take so long to complete?

I built a Data Table that has both sticky rows and sticky columns as well as has the ability to resize the columns as well. It's all done and working but I have to pre render all the cells in order to ...
0
votes
1answer
34 views

Why am I still getting a 401(Unauthorized) error from api get request?

I have an example of trying to get some videos from a channel in react using axios and get request to the api. Everything looks good but when It compiles, I get a console error that states: GET https:/...
0
votes
0answers
7 views

AWS Amplify returns generic Network Error on any Lambda failure

I'm building an app that connects with a serverless API on AWS (API Gateway/Lambda) via AWS Amplify used on a web (React) frontend. When the request is successful, everything works just fine (...
1
vote
1answer
21 views

Pass Data From Two Classes In React Native

i have no clue how to do this, i have two classes that have input fields one of them will be rendered depending on the button clicked on the previous page, both of them will render input fields. ...
0
votes
0answers
14 views

Graphql/React-Apollo: Reac map function error

In the console I am seeing the following in data. It appears I am not using the map function correctly: {data: {action: [{action: "Changed", timestamp: 1499348050,…},…]}} data:{action: [{action: ...
1
vote
1answer
23 views

object in redux state disappearing when another action is triggered

I have an array of data that is loaded into redux state when the Main component loads into the Data field, and I have a default app language of english also stored in redux state, if I click on my ...
-1
votes
1answer
22 views

Nodejs send data from server to client side react

How should I send data from server to my client side react code to render? A simple example would help a lot.
0
votes
0answers
29 views

React and Node Login implementation

I have an application in which i need to make auths i made the exact replica of react-routers auth workflow(https://reacttraining.com/react-router/web/example/auth-workflow) Auth.js const auth = { ...
0
votes
4answers
76 views

How to change the logic for the last element while mapping an array

Let's say there exists an array of keys: [ "link1", "link2", "link3" ] and there is a JSON object called links that is in the following format: { "link1": "https://google.com/", "link2": "https:...
-1
votes
1answer
15 views

How to fetch data dynamically from a bundle in React Native

I am a beginner in ReactNative. I have an app where I am defining the Version number using a Text tag. Is there any way we can get this dynamically through the bundle. Any help would be appreciated. ...
0
votes
0answers
3 views

NWB built React component using umd does not find React

I use nwb to build a component, then load using a it using a script tag. When it is loaded into a React component, I get an error because React is null, even though the importing React component has ...
0
votes
1answer
19 views

React Native - iOS - Local image invisible (works on android)

I'm mapping TouchableOpacity with an Image nested inside of it. It works great on Android but on iOS the image is invisible. There is still a 75x75 touchable opacity that I can tap but the image is ...
0
votes
2answers
31 views

“react doesn't exist” in Node.js command prompt

This is my 1st question in this site :) I'm pretty new to coding and I'm currently working in react. I was making my first project yesterday, today I went back to it and initialized live-server and ...
0
votes
0answers
11 views

Mixed Content with heroku server

Having this client-side configuration (react based) export const config = { API_URL: process.env.NODE_ENV === 'production' ? 'https://myserverapp.herokuapp.com/' : 'http://mywebapp/' } When ...
0
votes
0answers
10 views

Test component with a store Mocha and Enzyme

I am trying to test my component but because of the store I have an error. import React from 'react'; import { shallow, simulate } from 'enzyme'; import configureStore from 'redux-mock-store'; ...
0
votes
1answer
28 views

How can I detect line breaks in string coming from state?

I'm having trouble detecting line breaks coming from a text area. The standard .replace('↵', '\n') doesn't work, because by the time I call this.state.note the return characters have been respected. ...
0
votes
1answer
14 views

Removal of React wrapper div

I'm having a problem after using this this.setState to update the object. It seems like my object is getting updated with the new one after changing state, but then it returns to a function which is ...
-2
votes
0answers
10 views

React component Input delay

I'm getting this little error, a kind of delay in the input, I use a method in a Parent component called FilterableProductTable and execute them in the Searchbar component. this is the code i use:
0
votes
2answers
27 views

Reactjs : How to change props data from parent component that already distribute to child component?

I just creating a project and use a several component for a page and pass data by using props to each components. The problem is, when I have already change data from parent component to child ...
-1
votes
1answer
40 views

how to differentiate elements in React

I have few images which I need to zoom little bit (using CSS i.e. transform : scale(1.2);) on onMouseEnter and revert on onMouseLeave. I have below code which is working. CSS:- .style { ...
0
votes
2answers
12 views

TypeError: Cannot set property 'setState' of undefined. react

I did fetch data from NYTimes API and console log them. My initial state is {searchResponse: null} Then set state the response this.setState=({searchResponse:response.data}); and pass it to another ...
0
votes
1answer
10 views

reactJS and getting value in rendered input box

I have a reactJS application which looks up a barcode from a service. If the barcode is not found on the service, I render an error message to the user and I also render an input box and a button and ...
0
votes
0answers
4 views

WP-API: Unique section for unique component

I am creating an app react with as back end wordpress rest API. All the contents of the site must be able to be modified through the CMS in several languges. So I'm looking for a way to create Custom ...
0
votes
1answer
16 views

React Native Warning on screen transition

I am trying to move to another screen based on some conditions from my render view in react native export default class Home extends React.Component { constructor() { super(); } render(){ if(...
1
vote
1answer
32 views

Stateless functional component method never gets fresh data from Redux store, but others do

I got into some trouble. I have a pretty common functional component connected to Redux via mapStateToProps: const TableWrapper = ({ studentsSelection }) => { const onComponentStateChanged =...
0
votes
1answer
12 views

Component's JavaScript doesn't execute on routing with React router

I'm working on my first React project. I need to style some parts with JS because I'm dependent on the content. I'm calling the JS function from the components componentDidMount() upon JQuery's $(...
0
votes
0answers
18 views

Adding MongoDB to React application

I have created a simple todo List app using ReactJS through create-react-app. Each todo I add is pushed to an array called todos as shown below. state = { inpVal: '', todos: [], } ...
-3
votes
0answers
7 views

Using previousStatement

I'm using React-blockly-drawer. When I try to place a new type of block with the previousStatement: null parameter, inside any other control or repetitive block, I get this error: a.replace is not a ...
0
votes
1answer
8 views

How to get react-big-calendar to read and set in UTC

Currently I am using react-big-calendar in an app which sets and reads times in UTC throughout. However, I can't find a way to do this with BigCalendar which is causing timezone conflicts in my app. ...
0
votes
1answer
23 views

Grid Items aren't beside eachother Material UI

I am using the Grid component in material-ui. I am having trouble having the grid items stack beside each other. Right now they are stacking below each other. I am not sure what is making them stack ...
0
votes
1answer
35 views

React updating children component

I am having tough time in updating my child component. So, I have this in my render render() { let displaySearchCrypto; var CryptoData = this.props.cryptoLoaded; let i=0; let displayCrypto ...
0
votes
0answers
5 views

Find nearest result for address search using users current location

Is it possible to use Google Places API and pass an address such as 'darlington' and it choose the one closest (UK) rather than the one in (US) using the users current location? I can pass an address ...
0
votes
1answer
30 views

Component Not Updating React/Redux

I am using Redux on my app. I have an Items component connected to redux. It passes down props to individual Item components.I also have a ItemEditModal component that edits the individual component. ...
0
votes
0answers
21 views

I can not identify a specific xpath for to select a button using Selenium front-end React

I am trying to uniquely identify and select a radio button {YES,NO} under a specific question.Since the developers are using React it is difficult for me to identify the specific buttons.In the ...
0
votes
0answers
6 views

React app SSL error: EVP_DecryptFinal_ex bad decrypt

I am trying to run my React application with SSL certificate configured. In my start.js file I specified key and cerificate paths like this: const devServer = new WebpackDevServer(compiler, { .....
0
votes
1answer
13 views

Passing a function with React Context API to child component nested deep in the tree

I'm using React Context API for the first time. I have a table that generates a list of clients. Originally, I stored the clients in an array in state, and in the same page I had a function that ...