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.
478,905
questions
2302
votes
50
answers
1.7m
views
How to 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 ...
- 120k
2225
votes
67
answers
2.8m
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 (...
- 22.9k
2029
votes
85
answers
2.0m
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/>
}
</...
- 41.3k
1473
votes
25
answers
648k
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}>
- 15.1k
1441
votes
32
answers
968k
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 ...
- 46.1k
1268
votes
62
answers
850k
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 ...
- 13k
1124
votes
8
answers
282k
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.3k
1099
votes
23
answers
1.6m
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 ...
- 30.1k
1055
votes
32
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 ...
- 61.3k
1048
votes
32
answers
717k
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.5k
1020
votes
16
answers
384k
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 ...
- 10.4k
966
votes
29
answers
1.1m
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.6k
940
votes
23
answers
837k
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,740
925
votes
45
answers
419k
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.4k
910
votes
57
answers
943k
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 ...
- 22.6k
907
votes
38
answers
888k
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.7k
903
votes
13
answers
222k
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 ...
- 13.1k
861
votes
28
answers
699k
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,470
858
votes
47
answers
1.9m
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?
...
- 12.1k
852
votes
22
answers
825k
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,633
841
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,453
834
votes
54
answers
1.1m
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.
...
- 9,721
820
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,402
819
votes
5
answers
436k
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.
...
- 146k
782
votes
32
answers
930k
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 ...
- 12.2k
782
votes
50
answers
331k
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,277
747
votes
41
answers
1.0m
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,550
745
votes
7
answers
181k
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.6k
741
votes
28
answers
624k
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.7k
714
votes
8
answers
232k
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?
- 53.1k
699
votes
38
answers
443k
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,959
692
votes
48
answers
518k
views
How can I perform a debounce?
How do you perform debounce in React?
I want to debounce the handleOnChange function.
I tried with debounce(this.handleOnChange, 200), but it doesn't work.
function debounce(fn, delay) {
var timer = ...
- 6,995
684
votes
23
answers
459k
views
React Hooks: useEffect() is called twice even if an empty array is used as an argument
I 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 using both useState ...
- 7,801
676
votes
40
answers
898k
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,855
667
votes
10
answers
377k
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 ...
- 69.2k
661
votes
10
answers
269k
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) ?
}
}
- 169k
654
votes
23
answers
492k
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,703
645
votes
20
answers
1.1m
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
};
...
- 9,015
628
votes
36
answers
490k
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,505
621
votes
17
answers
831k
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.8k
618
votes
19
answers
924k
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 ...
- 43.8k
597
votes
12
answers
369k
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,721
586
votes
17
answers
601k
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.8k
586
votes
26
answers
638k
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,326
579
votes
11
answers
136k
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.2k
562
votes
23
answers
570k
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.4k
547
votes
18
answers
663k
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 ...
- 11.1k
541
votes
30
answers
948k
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 ...
- 7,246
541
votes
20
answers
770k
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,866
517
votes
54
answers
919k
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}>...
- 7,258