Questions tagged [reactjs]
React (also known as React.js or ReactJS) is an open-source JavaScript library developed by Facebook for building user interfaces. It uses a declarative, component-based paradigm and aims to be both efficient and flexible.
252,280
questions
1564
votes
34answers
812k views
Programmatically navigate using react router
With react-router I can use the Link element to create links which are natively handled by react router.
I see internally it calls this.context.transitionTo(...).
I want to do a navigation. Not ...
1352
votes
66answers
886k views
Loop inside React JSX
I'm trying to do something like the following in React JSX (where ObjectRow is a separate component):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</...
1126
votes
8answers
262k views
Why use Redux over Facebook Flux? [closed]
I've read this answer, reducing boilerplate, looked at few GitHub examples and even tried redux a little bit (todo apps).
As I understand, official redux doc motivations provide pros comparing to ...
974
votes
28answers
304k views
What do these three dots in React do?
What does the ... do in this React (using JSX) code and what is it called?
<Modal {...this.props} title='Modal heading' animation={false}>
943
votes
26answers
457k views
How to pass props to {this.props.children}
I'm trying to find the proper way to define some components which could be used in a generic way:
<Parent>
<Child value="1">
<Child value="2">
</Parent>
There is a logic ...
784
votes
36answers
242k views
What is the difference between React Native and React?
I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. React and React Native seems ...
734
votes
19answers
889k views
Can you force a React component to rerender without calling setState?
I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any ...
721
votes
47answers
371k views
React-router urls don't work when refreshing or writing manually
I'm using React-router and it works fine while I'm clicking on link buttons, but when I refresh my webpage it does not load what I want.
For instance, I am in localhost/joblist and everything is fine ...
718
votes
11answers
151k views
Why do we need middleware for async flow in Redux?
According to the docs, "Without middleware, Redux store only supports synchronous data flow". I don't understand why this is the case. Why can't the container component call the async API, and then ...
711
votes
11answers
674k views
Understanding unique keys for array children in React.js
I'm building a React component that accepts a JSON data source and creates a sortable table.
Each of the dynamic data rows has a unique key assigned to it but I'm still getting an error of:
Each ...
676
votes
32answers
559k views
React js onClick can't pass value to method
I want to read the onClick event value properties. But when I click on it, I see something like this on the console:
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", ...
668
votes
26answers
535k views
How to set focus on an input field after rendering?
What's the react way of setting focus on a particular text field after the component is rendered?
Documentation seems to suggest using refs, e.g:
Set ref="nameInput" on my input field in the render ...
630
votes
6answers
215k views
What is the difference between using constructor vs getInitialState in React / React Native?
I've seen both used interchangeably.
What are the main use cases for both? Are there advantages / disadvantages? Is one a better practice?
606
votes
12answers
336k views
How do I conditionally add attributes to React components?
Is there a way to only add attributes to a React component if a certain condition is met?
I'm supposed to add required and readOnly attributes to form elements based on an Ajax call after render, but ...
594
votes
36answers
209k views
What is the difference between state and props in React?
I was watching a Pluralsight course on React and the instructor stated that props should not be changed. I'm now reading an article (uberVU/react-guide) on props vs. state and it says
Both props ...
572
votes
29answers
707k views
Show or hide element in React
I am messing around with React.js for the first time and cannot find a way to show or hide something on a page via click event. I am not loading any other library to the page, so I am looking for ...
557
votes
10answers
204k views
What's the difference between “super()” and “super(props)” in React when using es6 classes?
When is it important to pass props to super(), and why?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
553
votes
36answers
452k views
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
I am getting this error:
Uncaught Error: Invariant Violation: Element type is invalid: expected
a string (for built-in components) or a class/function (for composite
components) but got: ...
541
votes
16answers
364k views
Call child method from parent
I have two components.
Parent component
Child component
I was trying to call child's method from Parent, I tried this way but couldn't get a result
class Parent extends Component {
render() {
...
528
votes
34answers
274k views
Perform debounce in React.js
How do you perform debounce in React.js?
I want to debounce the handleOnChange.
I tried with debounce(this.handleOnChange, 200) but it doesn't work.
function debounce(fn, delay) {
var timer = ...
525
votes
19answers
536k views
React.js inline style best practices
I'm aware that you can specify styles within React classes, like this:
const MyDiv = React.createClass({
render: function() {
const style = {
color: 'white',
fontSize: 200
};
...
519
votes
7answers
250k views
ReactJS - Does render get called any time “setState” is called?
Does React re-render all components and sub components every time setState() is called?
If so, why? I thought the idea was that React only rendered as little as needed - when state changed.
In the ...
503
votes
9answers
113k views
Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
There is a lot of talk about the latest kid in redux town right now, redux-saga/redux-saga. It uses generator functions for listening to/dispatching actions.
Before I wrap my head around it, I would ...
486
votes
16answers
426k views
Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
I am trying to set up my React.js app so that it only renders if a variable I have set is true.
The way my render function is set up looks like:
render: function() {
var text = this.state....
467
votes
34answers
757k views
React - How to get parameter value from query string?
How can I define a route in my routes.jsx file to capture the __firebase_request_key parameter value from a URL generated by Twitter's single sign on process after the redirect from their servers?
...
466
votes
7answers
391k views
How to get first N number of elements from an array
I am working with Javascript(ES6) /FaceBook react and trying to get the first 3 elements of an array that varies in size. I would like do the equivalent of Linq take(n).
In my Jsx file I have the ...
459
votes
40answers
329k views
Detect click outside React component
I'm looking for a way to detect if a click event happened outside of a component, as described in this article. jQuery closest() is used to see if the target from a click event has the dom element as ...
448
votes
14answers
480k views
Correct modification of state arrays in ReactJS
I want to add an element to the end of a state array, is this the correct way to do it?
this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});
I am concerned that ...
441
votes
15answers
237k views
A component is changing an uncontrolled input of type text to be controlled error in ReactJS
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a ...
429
votes
13answers
431k views
React JSX: selecting “selected” on selected <select> option
In a React component for a <select> menu, I need to set the selected attribute on the option that reflects the application state.
In render(), the optionState is passed from the state owner to ...
428
votes
26answers
274k views
How to update nested state properties in React
I'm trying to organize my state by using nested property like this:
this.state = {
someProperty: {
flag:true
}
}
But updating state like this,
this.setState({ someProperty.flag: false })...
402
votes
13answers
109k views
Error Running React Native App From Terminal (iOS)
I am following the tutorial on the official React Native website.
Using the following to build my project:
react-native run-ios
I get the error:
Found Xcode project TestProject.xcodeproj
xcrun: ...
392
votes
12answers
239k views
Invariant Violation: _registerComponent(…): Target container is not a DOM element
I get this error after a making trivial React example page:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Here's my code:
/** @jsx React.DOM ...
386
votes
21answers
609k views
How to push to History in React Router v4?
In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4, and I'm not sure ...
383
votes
28answers
406k views
How to add multiple classes to a ReactJS Component?
I am new to ReactJS and JSX and I am having a little problem with the code below.
I am trying to add multiple classes to the className attribute on each li:
<li key={index} className={...
383
votes
16answers
320k views
React “after render” code?
I have an app where I need to set the height of an element (lets say "app-content") dynamically. It takes the height of the "chrome" of the app and subtracts it and then sets the height of the "app-...
377
votes
14answers
317k views
How to update parent's state in React?
My structure looks as follows:
Component 1
- |- Component 2
- - |- Component 4
- - - |- Component 5
Component 3
Component 3 should display some data depending on state of Component 5.
...
375
votes
5answers
87k views
Why is React's concept of Virtual DOM said to be more performant than dirty model checking?
I saw a React dev talk at (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) and the speaker mentioned that dirty-checking of the model can be slow. But isn't calculating the diff ...
374
votes
14answers
197k views
React - changing an uncontrolled input
I have a simple react component with the form which I believe to have one controlled input:
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
...
370
votes
6answers
237k views
What is mapDispatchToProps?
I was reading the documentation for the Redux library and it has this example:
In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a ...
356
votes
40answers
514k views
Invariant Violation: Objects are not valid as a React child
In my component's render function I have:
render() {
const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
return (<li onClick={this.onItemClick.bind(this, item)} key={item}>...
355
votes
35answers
96k views
Template not provided using create-react-app
When I type the create-react-app my-app command in my terminal, it appears to work - downloading all libraries successfully etc. At the end of that process however I get a message that a template was ...
354
votes
19answers
297k views
React Js conditionally applying class attributes
I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this:
<TopicNav showBulkActions={this.__hasMultipleSelected} />
...
345
votes
16answers
269k views
Programmatically navigate using react router V4
I have just replaced react-router from v3 to v4.
But I am not sure how to programmatically navigate in the member function of a Component.
i.e in handleClick() function I want to navigate to /path/...
343
votes
20answers
267k views
Rerender view on browser resize with React
How can I get React to re-render the view when the browser window is resized?
Background
I have some blocks that I want to layout individually on the page, however I also want them to update when ...
338
votes
6answers
175k views
Why calling react setState method doesn't mutate the state immediately?
I'm reading Forms section of reactjs documentation and just tried this code to demonstrate onChange usage (JSBIN).
var React= require('react');
var ControlledForm= React.createClass({
...
330
votes
11answers
162k views
ReactJS Two components communicating
I just got started with ReactJS and am a little stuck on a problem that I have.
My application is essentially a list with filters and a button to change the layout.
At the moment I'm using three ...
