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.
reactjs
481,031
questions
2347
votes
67
answers
3.0m
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 (...
- 24.1k
2334
votes
49
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 ...
- 121k
2050
votes
85
answers
2.1m
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.6k
1477
votes
27
answers
652k
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
1445
votes
32
answers
983k
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.3k
1278
votes
63
answers
869k
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 ...
- 13.1k
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.4k
1109
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.2k
1065
votes
31
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.7k
1062
votes
29
answers
736k
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.7k
1042
votes
16
answers
396k
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.6k
971
votes
28
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.7k
947
votes
23
answers
851k
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,810
925
votes
45
answers
424k
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
917
votes
57
answers
961k
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.9k
914
votes
38
answers
897k
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.8k
904
votes
13
answers
223k
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.2k
871
votes
47
answers
2.0m
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.3k
868
votes
28
answers
713k
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,550
861
votes
22
answers
852k
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,723
856
votes
23
answers
1.2m
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,603
844
votes
5
answers
459k
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.
...
- 147k
842
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,801
824
votes
34
answers
1.5m
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,442
788
votes
32
answers
961k
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.3k
785
votes
50
answers
334k
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,317
759
votes
28
answers
645k
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.9k
758
votes
43
answers
1.1m
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,660
747
votes
7
answers
183k
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.8k
718
votes
24
answers
495k
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 ...
- 8,141
715
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.3k
709
votes
38
answers
454k
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 ...
- 8,089
692
votes
49
answers
521k
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
680
votes
40
answers
912k
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,895
668
votes
10
answers
382k
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 ...
- 70k
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) ?
}
}
- 170k
655
votes
23
answers
494k
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,713
646
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,035
631
votes
36
answers
495k
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,535
622
votes
17
answers
837k
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
930k
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 ...
- 44.1k
608
votes
12
answers
383k
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,831
592
votes
26
answers
646k
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,386
589
votes
17
answers
605k
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
578
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
569
votes
25
answers
587k
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
560
votes
17
answers
688k
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.3k
549
votes
20
answers
808k
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,946
544
votes
29
answers
968k
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,286
534
votes
9
answers
620k
views
What does npm install --legacy-peer-deps do exactly? When is it recommended / What's a potential use case?
Just ran into this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! ...
- 7,028