Questions tagged [reactjs]

50261 questions
1

votes
2

answer
839

Views

How to use spread operator on object create-react-app?

I am new with react-redux concept and I tried to use spread operator. Below is my code: This is my store(createStore.js): import { createStore } from 'redux'; import reducer from './reducers'; const store = createStore(reducer); export default store; with my reducers using redux combineReducers(only...
LearnToCode
1

votes
1

answer
45

Views

How to keep pie menu in background?

I have an page layout which cover all components const PageLayout = ({ children, navBar }) => { return ( {children} © 2017. {settings.app.name}. ); }; And each page have prototype look like this class SecuritySystemPage extends Component { render() { return ( {//some thing to display here} ) } } Re...
tuan.tran
1

votes
1

answer
58

Views

Adding barchart into tooltip of scatterChart in nvd3 - react component not rendering

I created a scatterChart from nvd3 and then tried to customize the tooltip the way it is described here: nvd3 piechart.js - How to edit the tooltip? using chart.tooltip.contentGenerator() approach: import React from 'react' import * as d3 from 'd3'; import nvd3 from 'nvd3'; var nv = nvd3; import Bar...
Nikita Vlasenko
1

votes
0

answer
301

Views

How to bundle Create React App with webpack?

I'm bundling the react app into a single file so that it will be simpler to serve from a Scala Play backend. my webpack.config.js looks like this const webpack = require('webpack') const path = require('path') module.exports = { entry: { frontApp: './src/index.js' }, output: { path: path.join(__dir...
irregular
1

votes
0

answer
512

Views

I get a 503 response status whenever I try to make a POST request from my client

I recently created a server and deployed it to Heroku. It works fine in Postman and when testing out basic GET requests. But whenever I try to make POST request to it via Axios in my client, I am met with this error. In my back-end server, I enabled cors so that it could make cross-domain requests....
MountainSlayer
1

votes
2

answer
78

Views

Passing data from child to parent in React shows type error

I am new in React Js I am trying to pass value from child to parent and while showing components through a map there shows an error in the emit/trigger function render(){ var choices =['krass', 'Einfach', 'Dazu', 'Dafur']; const listitem = choices.map(function(name, index){ ; }); return ( {listitem...
Md. Jahidul Islam
1

votes
0

answer
39

Views

is componentWillReceiveProps suitable for some instant logic?

I'm making a simple login process by react-redux: there are two redux-connected components called App and Login, and a redux state loggedIn which will be modified to true after an async call. I hope to check the loggedIn changing in Login::componentWillReceiveProps(by compareing with last value),...
fatfatson
1

votes
2

answer
432

Views

React Router Link with params not reloading page with new data from componentDidMount and Redux axios data fetching

I have this react + redux app I have 1 Movie component with some movie data displayed on it which are fetched from API. So at the bottom, i decided to add a Similar movies section with a couple of components to navigate to the new movie pages. { this.props.thisMovieIdDataSIMILAR.slice(0,4).map((mov...
1

votes
0

answer
201

Views

How can I dynamic-load model on subroute with dva.js?

I want to dynamic-load model on sub-route, because the model can be very big , and the model is dynamic-generated sometimes(with dynamic namespace). the target This is my code. I imported app from /src/index.js import React from 'react' import modelExtend from 'dva-model-extend' import { Route, Swi...
Zmayor
1

votes
0

answer
59

Views

Google Search console reporting Soft 404 for existing pages

I have recently made a new website. Now Google Search console is reporting Soft 404 for pages that actually exist. I didn't have this problems on the previous website that was server side rendered with PHP. The new website is React based and I believe this is the problem but I still haven't found t...
Nuno Santos
1

votes
0

answer
53

Views

How to update states from outside the react class?

I have a react class with some initial states. let SubjectList = createReactClass({ getInitialState: function() { return { subjects: ['Maths', 'Science', 'History'] } }, I have a function to update the subject array as follows: addSubject: function(subjectName) { if (subjectName !== '') { let subLis...
PiyushPawar
1

votes
0

answer
881

Views

Generating id's for React components for Selenium tests

I'd like to generate id's for almost every element in my website, to have an easier time handling elements for Selenium tests. Is this a good approach? My application changes quite a bit. I can't seem to add the id HTML attribute to the React component, because React interprets it as props e.g. ......
Patryk Janik
1

votes
1

answer
310

Views

Integrate/ Inject React Component into Static(loaded) HTML

What i want is to be able to render HTML from react component, after a page has loaded without reloading it. I have a parent JSP loaded from a struts2 action, inside of which we are planning to integrate ReactJS as a roadmap to complete client-side UI. Here is the Child JSP. Sample JSX import React...
namasri aditya
1

votes
0

answer
125

Views

Javascript not working after a click on a link in Materialize CSS

I am doing ReactJS using MaterializeCSS for my UI and I have a script in JS that looks like one below for MaterializeCSS so that I could use modal class. $(document).ready( function () { initializeMaterialize() } ); function getUUID() { return (Math.random().toString(36).substring(2)+(new Date(...
Edper
1

votes
0

answer
121

Views

Passing callback to externally loading script in React

For some reason I don't want to use npm or Atmosphere Google Maps packages in my Meteor app. And try to use Google maps directly. So, inside a React Component I have the following render method and onMapLoaded() class method: render(){ return( (this.instance = el)}> Map ); } Can't figure out, how to...
Dmitry
1

votes
1

answer
353

Views

storybook addon readme wrong display order

My issue here is that I am trying to display my story with the readme addon but it doesn't display in the order I want it to and I don't see how my actual code is different in any way than the one from the github exemple. index.js import React from 'react' import { storiesOf, configure } from '@stor...
Christopher Vuong
1

votes
1

answer
1.8k

Views

Use PrimeReact Themes with CSS Modules Enabled in React Application

I have enabled CSS modules within webpack.config in my React application so that I can locally scope CSS files to individual components. I'm also trying to use the TabView component from PrimeReact. When I do so the themes from PrimeReact are not applied. If I create a separate project and do not...
HendPro12
1

votes
0

answer
874

Views

react-intl with redux language swicher

I'm trying to make a language switcher with a react-inlt and redux, but when i try to switch, then view is not rendered (< FormattedMessage> dosen't change), but redux work and locale in < IntlProvider> is changed. I haven't got any error in chrome console. index.js import React from 'react'; import...
JanuszO
1

votes
0

answer
178

Views

multipart/mixed: with axios and reactjs for several json requests

I am trying to request multiple JSON requests for youtube api v3: The aim is to get the latest 25 videos uploaded from 5 different channels. https://www.googleapis.com/youtube/v3/search?part=snippet&channelId={CHANL000}&channelType=any&maxResults=25&order=date&key={XXXXX} https://www.googleapis.com/...
Santhosh Yedidi
1

votes
1

answer
68

Views

React Native Image URL lowers my performance

When I display my images in the horizontal scroll-view with paging enabled the performance of app decreases. I know it is due to high resolution of the image. I want a good way so that I can load image with out degrading it's quality. Thank you in advance.
Alish Manandhar
1

votes
2

answer
35

Views

How to map a mapped const in another const React.js

Ok so say I have 3 arrays like so: import React from 'react'; const hello = ['hello', 'hi', 'sup']; const bye = ['bye', 'goodbye', 'see ya']; const names = ['john', 'bob', 'jill']; Then let's say that I want to map each array like so: const helloWorld = hello.map(helloCode => { return ( {helloCo...
DeadOnBullseye
1

votes
2

answer
743

Views

Slow Karma Unit Tests

I wrote unit tests for a small reach application using Jasmine and Karma.And Karma is running slow for these tests. This is my karma config: var unitTestReportOutputDir = 'unit-test-report'; module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine'], reporters: ['dots'],...
zfranciscus
1

votes
3

answer
1.9k

Views

React - render data in a table

I have an object in state as per the following: { 'data': { 'available': { 'profileOne': { 'a': 14, 'b': 14, 'c': 0, 'd': 0, 'e': 18 }, 'profileTwo': { 'a': 13, 'b': 9, 'c': 0, 'd': 0, 'e': 18 }, 'profileThree': { 'a': 12, 'b': 12, 'c': 0, 'd': 0, 'e': 14 }, 'profileFour': { 'a': 3, 'b': 3, 'c': 0,...
edward
1

votes
0

answer
1.2k

Views

Invariant Violation: A <Router> may have only one child element when testing (Jest + Enzyme)

I am starting to test a React + Redux + React-router application and I have been struggling with some basic tests. This is my component (company-view.js): import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; import {withCookies} from 'react-cookie'; import CompanySh...
Esteban Dib
1

votes
0

answer
60

Views

Creating a type to extend React.Component with class attributes

I'm trying to bring Typescript into a project that extends react components with various additional class properties. I'm trying to work out how to extend the React.Component type to incorporate those additional attributes. As an example of what I mean, in both class and functional form: class Sampl...
Kevin Rocker
1

votes
1

answer
58

Views

What's the right approach for storing and accessing table data in a Redux store

I'm very new to ReactJS and Redux (but not development, in general). I'm trying to determine how best to approach a SPA I'm building. My app will download datasets via API and display them in a spreadsheet. I'd like to use Redux to store the data. Is that the right approach? We could potentially be...
UnifiedEntity
1

votes
1

answer
356

Views

Endless loop after changing state

I've created the component, which passes the function to change its state to the child. //parent component setSubject = (id) => { this.setState({ currentSubject: id }); } //child component this.props.setSubject(subject.id)}>Egzamino programa That state is passed to another component. From there I am...
Donatas Jarmalovicius
1

votes
0

answer
143

Views

React router - Allow basename with extension

I'm wondering how to allow a basename with an .html extension to get matched by the React Router: //www.domain.com/foo/bar/index.html //www.domain.com/baz/quux.html Right now, I get the error Cannot GET /foo/bar/index.html. The reason I ask is we are migrating an old, static HTML/PHP site to React,...
mwieczorek
1

votes
0

answer
47

Views

Drag and drop in IE10, 11

I am checking out an example on drag and drop in React and I found really great npm modules in the site. Also I found an example drag and drop which after make a changes like e.dataTransfer.setData('text/html', this.dragged); to e.dataTransfer.setData('text', this.dragged.outerHTML); Code is workin...
G_S
1

votes
0

answer
72

Views

Integrating Date() with MaterialUI Slider Component

Here's what I am trying to do. MaterialUI has a Slider Component that can be used with integers. It's my understanding it doesn't allow for decimals or time formats unless it is programmed that way or manipulated in some way. A normal slider looks like this This is done by passing these values The...
LOTUSMS
1

votes
1

answer
380

Views

How do I pass a prop into a react-router Route?

I'm trying to learn react router (v4) in depth by building a simple app with firebase, what i am doing is when a user login with google using firebase they will be redirected to another component and when they go to the root path again '/' they will no longer see the login ( i am doing this by redir...
null
1

votes
1

answer
212

Views

React standalone bundle without react library inside

I have created standalone bundle which I include in React App. The App itself does not anything know about Extension Bundle (next XB) it load, but the XB does know about App and libraries it use inside. How to make App share library packages it compiled with to XB? I mean if the App compiled with Re...
Thomas Anderson
1

votes
1

answer
169

Views

How to convert date object to string in material-ui? ReactJS. Show date on table

DatePicker in material-ui generate date Object. I want to show select value on the table. To show this I need convert Object to string, because is not possible to pass Object to table cell. In which place and how I have to use dateToString() function to show date on table row? Or maybe is something...
Italik
1

votes
0

answer
26

Views

drag and drop items between sections

See here I have two sections. I want to drag and drop elements between that two sections, but here's the element is appending but I need to drop the element at the first in that sections. When we drop the element it should place as first element for that section. this is my code: class Sections exte...
mahigorige25
1

votes
0

answer
40

Views

Return places and addresses from Mapbox

I am using the mapbox geocoder to return points based on search input. I would like my user to be able to type in raw addresses (e.g. 123 Elm St.) in addition to names of places (e.g. Starbucks). My function that returns results is here: geocodeThis(query) { const { homePoint } = this.state const ac...
astrojams1
1

votes
0

answer
693

Views

antd Table Summary

I have an antd table where I want to summarize columns in the footer. However, I'm having issues getting them to line up properly with my columns. I've tried to use Row / Col to get it to match up but without much luck. Also it needs to be responsive... Is there an better way to achieve this?
NSjonas
1

votes
1

answer
40

Views

Function for changing numbers with React doesn't work properly

I'm trying to change number stored in a variable by clicking a button but the first time I click the button, it doesn't change the value of the variable but the second one does. I change the number in increments of 1, so when I click the button its currentNumber += 1 and I run a console.log after it...
Leo
1

votes
1

answer
103

Views

React-redux: Nested array is being duplicated

I'm trying to create an order table (array) that has a nested 'products' array in each order. The order table is rendering as expected, but the products are the same for every order. OrderTable Component (simplified for clarity) class OrderTable extends Component { componentWillMount() { this.props....
Ash
0

votes
0

answer
11

Views

react-testing-library | Cannot Split Test into smaller chunks inside describe method

I'm learning about unit testing React components using react-testing-library I have the component rendering correctly, however, when I aim to break the test into smaller chunks inside a describe() function. The test breaks and here's why. Current only one or the other test() passes but not both imp...
Null isTrue
0

votes
2

answer
29

Views

Looping through a list of Objects is not displaying properly

I'm trying to display a loop of objects. It's showing through console.log, but it's not showing on the browser. My current code is as follows: class Profile extends React.Component { renderList() { const { booking } = this.props; booking && Object.keys(booking).map(x => { console.log('booking',...
Kevvv

View additional questions