Questions tagged [reactjs]
React is a JavaScript library for building user interfaces. It uses a declarative, component-based paradigm and aims to be efficient and flexible.
469,425
questions
2249
votes
47
answers
1.6m
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 ...
- 118k
1972
votes
84
answers
1.9m
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/>
}
</...
- 40.6k
1786
votes
64
answers
2.1m
views
Error message "error:0308010C:digital envelope routines::unsupported"
I created the default IntelliJ IDEA React project and got this:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (...
- 18.5k
1451
votes
23
answers
633k
views
What are these three dots in React doing?
What does the ... do in this React (using JSX) code and what is it called?
<Modal {...this.props} title='Modal heading' animation={false}>
- 14.8k
1413
votes
32
answers
926k
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 ...
- 45.5k
1232
votes
59
answers
803k
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 ...
- 12.7k
1124
votes
8
answers
281k
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 ...
- 45.1k
1073
votes
22
answers
1.5m
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 ...
- 29.7k
1026
votes
28
answers
1.3m
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 ...
- 59.9k
1008
votes
29
answers
671k
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 ...
- 12.1k
971
votes
26
answers
359k
views
Difference between npx and npm?
I have just started learning React, and Facebook helps in simplifying the initial setup by providing the following ready-made project.
If I have to install the skeleton project I have to type npx ...
- 9,910
947
votes
30
answers
1.0m
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 ...
- 11.4k
925
votes
45
answers
409k
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 ...
- 11.3k
917
votes
23
answers
791k
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() {
...
- 9,510
898
votes
13
answers
217k
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 ...
- 13k
895
votes
37
answers
870k
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", ...
- 10.6k
881
votes
56
answers
881k
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 ...
- 21.8k
841
votes
28
answers
658k
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 ...
- 9,230
835
votes
47
answers
1.8m
views
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?
...
- 11.9k
818
votes
54
answers
997k
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: object.
This ...
- 9,531
806
votes
34
answers
1.4m
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 ...
- 8,252
806
votes
23
answers
1.1m
views
How to fix missing dependency warning when using useEffect React Hook
With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request:
./src/components/BusinessesList.js
Line 51: React Hook ...
- 8,093
802
votes
18
answers
752k
views
The useState set method is not reflecting a change immediately
I am trying to learn hooks and the useState method has made me confused. I am assigning an initial value to a state in the form of an array. The set method in useState is not working for me, both with ...
- 8,133
790
votes
21
answers
1.1m
views
What is "not assignable to parameter of type never" error in TypeScript?
Code is:
const foo = (foo: string) => {
const result = []
result.push(foo)
}
I get the following TS error:
[ts] Argument of type 'string' is not assignable to parameter of type 'never'.
What ...
- 14k
769
votes
50
answers
323k
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 ...
- 9,127
754
votes
5
answers
374k
views
When to use JSX.Element vs ReactNode vs ReactElement?
I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my render functions, specifically in my functional components.
...
- 141k
747
votes
32
answers
838k
views
How to specify a port to run a create-react-app based project?
My project is based on create-react-app. npm start or yarn start by default will run the application on port 3000 and there is no option of specifying a port in the package.json.
How can I specify a ...
- 11.6k
734
votes
8
answers
175k
views
What do multiple arrow functions mean in JavaScript?
I have been reading a bunch of React code and I see stuff like this that I don't understand:
handleChange = field => e => {
e.preventDefault();
/// Do something here
}
- 24.2k
716
votes
39
answers
968k
views
Attempted import error: 'Switch' is not exported from 'react-router-dom'
I don't know why I am getting this error and I can't find an answer for it anywhere. I have uninstalled the react-router-dom package and reinstalled it, but it continues to tell me that the switch ...
- 7,240
708
votes
8
answers
231k
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?
- 52.6k
697
votes
26
answers
571k
views
What is the type of the 'children' prop?
I have a very simple functional component as follows:
import * as React from 'react';
export interface AuxProps {
children: React.ReactNode
}
const aux = (props: AuxProps) => props....
- 13.1k
686
votes
38
answers
416k
views
Hide keyboard in react-native
If I tap onto a textinput, I want to be able to tap somewhere else in order to dismiss the keyboard again (not the return key though). I haven't found the slightest piece of information concerning ...
- 7,799
686
votes
49
answers
511k
views
How to perform debounce?
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 = ...
- 6,935
660
votes
40
answers
855k
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={...
- 6,685
654
votes
10
answers
267k
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) ?
}
}
- 167k
653
votes
10
answers
365k
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 ...
- 66.8k
649
votes
23
answers
483k
views
Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0
I've created a blank React project, using the command: npx create-react-app on npm v7.0.7 and Node.js v15.0.1
Installed:
React v17.0.1,
node-sass v5.0.0,
Then I tried to import a blank .scss file to ...
- 6,643
635
votes
20
answers
1.0m
views
React.js inline style best practices [closed]
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
};
...
- 8,895
620
votes
37
answers
477k
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 })...
- 7,425
613
votes
17
answers
807k
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 ...
- 24.6k
610
votes
18
answers
900k
views
Correct modification of state arrays in React.js
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'm concerned that ...
- 42.8k
579
votes
16
answers
588k
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....
- 12.6k
577
votes
23
answers
360k
views
React Hooks: useEffect() is called twice even if an empty array is used as an argument
I am new to reactJS and am writing code so that before the data is loaded from DB, it will show loading message, and then after it is loaded, render components with the loaded data. To do this, I am ...
- 6,711
576
votes
11
answers
135k
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 ...
- 10.1k
573
votes
25
answers
617k
views
How can I update the 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.
Since ...
- 6,196
568
votes
11
answers
335k
views
ReactJS - .JS vs .JSX
There is something I find very confusing when working in React.js.
There are plenty of examples available on internet which use .js files with React but many others use .jsx files.
I have read about ...
- 6,399
547
votes
23
answers
519k
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) {
...
- 12.2k
524
votes
16
answers
596k
views
How to call loading function with React useEffect only once
The useEffect React hook will run the passed-in function on every change. This can be optimized to let it call only when the desired properties change.
What if I want to call an initialization ...
- 10.7k
514
votes
30
answers
889k
views
Adding script tag to React/JSX
I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far:
'use strict';
import '../../styles/pages/people.scss';
import React, { Component ...
- 6,976
505
votes
17
answers
688k
views
React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
I was trying the useEffect example something like below:
useEffect(async () => {
try {
const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
const json = ...
- 5,486