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.

Filter by
Sorted by
Tagged with
2302 votes
50 answers

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 ...
George Mauer's user avatar
2225 votes
67 answers

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 (...
a1cd's user avatar
  • 22.9k
2029 votes
85 answers

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/> } </...
B Robster's user avatar
  • 41.3k
1473 votes
25 answers

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}>
Thomas Johansen's user avatar
1441 votes
32 answers

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 ...
plus-'s user avatar
  • 46.1k
1268 votes
62 answers

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 ...
DavidDev's user avatar
  • 13k
1124 votes
8 answers

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 ...
VB_'s user avatar
  • 45.3k
1099 votes
23 answers

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 ...
Philip Walton's user avatar
1055 votes
32 answers

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 ...
Brett DeWoody's user avatar
1048 votes
32 answers

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 ...
Remi Sture's user avatar
  • 12.5k
1020 votes
16 answers

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 ...
Paresh Maniyar's user avatar
966 votes
29 answers

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 ...
Dave's user avatar
  • 11.6k
940 votes
23 answers

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() { ...
N8FURY's user avatar
  • 9,740
925 votes
45 answers

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 ...
shiva kumar's user avatar
  • 11.4k
910 votes
57 answers

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 ...
Thijs Koerselman's user avatar
907 votes
38 answers

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: ".", ...
user1924375's user avatar
  • 10.7k
903 votes
13 answers

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 ...
Stas Bichenko's user avatar
861 votes
28 answers

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 ...
Riya Kapuria's user avatar
  • 9,470
858 votes
47 answers

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? ...
Franco's user avatar
  • 12.1k
852 votes
22 answers

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 ...
Pranjal's user avatar
  • 8,633
841 votes
23 answers

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 ...
russ's user avatar
  • 8,453
834 votes
54 answers

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. ...
Pankaj Thakur's user avatar
820 votes
34 answers

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 ...
user1725382's user avatar
  • 8,402
819 votes
5 answers

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. ...
Golo Roden's user avatar
  • 146k
782 votes
32 answers

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 ...
letthefireflieslive's user avatar
782 votes
50 answers

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 ...
Animal Rights's user avatar
747 votes
41 answers

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 ...
ajesamann's user avatar
  • 7,550
745 votes
7 answers

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 }
jhamm's user avatar
  • 24.6k
741 votes
28 answers

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....
Asool's user avatar
  • 13.7k
714 votes
8 answers

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?
Nader Dabit's user avatar
  • 53.1k
699 votes
38 answers

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 ...
TurboFish's user avatar
  • 7,959
692 votes
48 answers

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 = ...
Chetan Ankola's user avatar
684 votes
23 answers

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 ...
J.Ko's user avatar
  • 7,801
676 votes
40 answers

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={...
Hector's user avatar
  • 6,855
667 votes
10 answers

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 ...
Brad Parks's user avatar
  • 69.2k
661 votes
10 answers

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) ? } }
Misha Moroshko's user avatar
654 votes
23 answers

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 ...
JDKot's user avatar
  • 6,703
645 votes
20 answers

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 }; ...
eye_mew's user avatar
  • 9,015
628 votes
36 answers

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 })...
Alex Yong's user avatar
  • 7,505
621 votes
17 answers

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 ...
cantera's user avatar
  • 24.8k
618 votes
19 answers

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 ...
fadedbee's user avatar
  • 43.8k
597 votes
12 answers

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 ...
ConfusedDeveloper's user avatar
586 votes
17 answers

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....
user1072337's user avatar
  • 12.8k
586 votes
26 answers

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 ...
Wojciech Kulma's user avatar
579 votes
11 answers

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 ...
hampusohlsson's user avatar
562 votes
23 answers

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) { ...
alexs333's user avatar
  • 12.4k
547 votes
18 answers

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 ...
Dávid Molnár's user avatar
541 votes
30 answers

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 ...
ArrayKnight's user avatar
  • 7,246
541 votes
20 answers

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(`${subreddit}.json`); const json = ...
RedPandaz's user avatar
  • 5,866
517 votes
54 answers

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}>...
almeynman's user avatar
  • 7,258

2 3 4 5