profile
viewpoint
Brandon Dail aweary @facebook Seattle, WA https://twitter.com/aweary front-end at @facebook. previously @FormidableLabs. I help maintain @reactjs and others. Composable and pure.

airbnb/enzyme 18476

JavaScript Testing utilities for React

aweary/alder 163

A minimal implementation of the UNIX tree command with colors!

aweary/babel-rust 7

A source-to-source JavaScript compiler written in Rust. Not for production use.

aweary/assert-report 4

A barebones test reporter in ~1.5kb with zero dependencies

aweary/cached-validations 3

Create validation functions that cache results

aweary/1x.engineer 1

The official website of 1x Engineers around the world

aweary/awesome-redux 1

Awesome list of Redux examples and middlewares

push eventaweary/microbe.js

Raj Mahey

commit sha c21558572392385ab23235b3465cfdb6dbfd908e

Update README.md "/" to "." (/ at end of sentence instead of a period/ " accepts an objects" -> "accepts an object" (assuming object should be singular?) Various minor grammatical changes.

view details

Brandon Dail

commit sha 0d112a9f77fb6a30d4007ec67394fe69ec680f32

Merge pull request #31 from hgdsraj/hgdsraj-patch-1 Update README.md

view details

push time in 2 days

PR merged aweary/microbe.js

Update README.md

"/" to "." (/ at end of sentence instead of a period/ " accepts an objects" -> "accepts an object" (assuming object should be singular?) Various minor grammatical changes.

+4 -4

0 comment

1 changed file

hgdsraj

pr closed time in 2 days

startedmariusschulz/styx

started time in 5 days

starteddanieljtrujillo/TrICNET

started time in 16 days

startedlukejacksonn/servor

started time in 19 days

PR closed facebook/react

Update README.md

Change name

+2 -2

4 comments

1 changed file

jameskip

pr closed time in 23 days

startedmdn/browser-compat-data

started time in a month

startedmicrosoft/playwright

started time in a month

startedeslint/eslint

started time in a month

startedpikapkg/snowpack

started time in a month

startedexcalidraw/excalidraw

started time in a month

startedfelixgirault/rea11y

started time in a month

startedwesbos/awesome-uses

started time in a month

startedlukeed/formee

started time in a month

issue closedfacebook/react

Recommendation - research a Component-Oriented Programming approaches in game development for improving code reuse

Do you want to request a feature or report a bug? feature

I want to recommend to research one of variants Component-Oriented Programming (COP) approaches in game programming with which I worked in the past.

Most programmers know only one way to reuse code in OOP - inheritance. Because of this, a lot of articles are distributed on the Internet with incorrect comparison of classes with functions. Also you often changed approaches of code reuse - mixins, HOC, render props, hooks. But already has long been a quality solutions for reusing code (for example: “component” game programming pattern, Entity Component System). https://gameprogrammingpatterns.com/component.html (find text “class ContainerObject” in page for example) https://www.raywenderlich.com/2806-introduction-to-component-based-architecture-in-games#toc-anchor-006

Good example using COP has in Unity3d engine. Including for creating UI. https://docs.unity3d.com/Manual/Components.html

Here is an examples of using a some variant COP approach in React. The variant like approach in Unity3d. The examples for demonstration. The solution is not completed and not optimized.

  • https://codesandbox.io/s/example-of-cop-approach-from-game-programming-in-react-6yt8c Example of adding additional logic to component in runtime and of logic reuse outside class component
  • https://codesandbox.io/s/second-example-of-cop-approach-from-game-programming-in-react-zo2yy there a several examples using this aproah. React components structure was changed for more flexibility.

Comparison of some features: image

If you don’t want to add a similar implementation to the React sources, you can to write a similar example in the documentation. In order not to mislead people, as if only hooks allow to write reusable code effectively in react.

Also I suppose that this approach can be adapted for functional components. Thus, this will get rid of some of the shortcomings of the hooks.

We can discuss about the approach in the Issue.

closed time in a month

sergeysibara

issue commentfacebook/react

Recommendation - research a Component-Oriented Programming approaches in game development for improving code reuse

The RFC process is intended to make it easier for the team to evaluate proposals that require substantial changes to React.

Did I understand correctly that it is necessary to submit a pull request with detailed description and example in 0000-my-feature.md in the RFC repository instead of creating a new issue?

@sergeysibara that's correct, you should follow the instructions outlined in the RFC repo. Here is a good example of a small and straightforward RFC for React.memo. Thanks!

sergeysibara

comment created time in a month

startedfitzgen/bumpalo

started time in 2 months

issue closedfacebook/react

square wont move on _dragTask()

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? report a bug What is the current behavior? the square should move, but it doesnt. i should be able to get it coordinates. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

import React from 'react';
import './App.css';

class App extends React.Component {

  componentDidMount() {
  }

  constructor(props) {
    super(props);
    this.state = {
      MainContainer: {backgroundColor: "#282c34", display: "flex", minHeight: "100vh"},
      ObjectMap: [],
    }
    this._createObject = this._createObject.bind(this);
    this._createBox = this._createBox.bind(this);
    this._buttonCreateBox1 = this._buttonCreateBox1.bind(this);
    this._dragTask = this._dragTask.bind(this);
  }

  _createObject = (object) => {
    var ObjectMap = this.state.ObjectMap;
    ObjectMap.push(object);
    this.setState({ObjectMap: ObjectMap});
  }

  _createBox = (style) => {
    var object = {position: "absolute", top: this.state.positionX, left: this.state.positionY};
    var styleObject = Object.assign({},
      object, style
    )
    return (
      <div style={styleObject} draggable="true" onDragEnd={(event) => {this._dragTask(event)}}>

      </div>
      );
    
  }

  _dragTask(event) {
    event.persist();
    this.setState({positionX: event.screenX, positionY: event.screenY}, () => { console.log("Page X:"+ this.state.positionX + " Page Y:" + this.state.positionY); });
  }

  _buttonCreateBox1 = () => {
    this._createObject(this._createBox({backgroundColor: "white", width: "300px", height: "300px"}));
  }

  render() {
    return (
      <div style={this.state.MainContainer}>
        <button type="button" onClick={ this._buttonCreateBox1 }>Click Me!</button>
        {
          this.state.ObjectMap.map((item, index) => {
            return item
          })
        }
      </div>
    );
  }
}
export default App;

What is the expected behavior?

As said above, the square should move.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All platforms, and every browser as far as i know.

closed time in 2 months

joaoalbertocsjunior

issue commentfacebook/react

square wont move on _dragTask()

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

joaoalbertocsjunior

comment created time in 2 months

startedmatthiasbeyer/filters

started time in 2 months

issue commentfacebook/react

How to setState after window.open finishes loading?

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

MimoJSRepo

comment created time in 2 months

issue closedfacebook/react

How to setState after window.open finishes loading?

I have two forms with two buttons,

FormA with Button A

FormB with Button B

When I click on Button A, I want to execute the following function:

handleClick() {

window.open(window.location.href, '_self');

this.setState({ showformB: true })

}

The final goal is when I click Button B on FormB, the current browser tab should be closed using:

window.close()

( Because we can not use window.close() unless same page is opened using window.open() )

but this.setState({ showformB: true }) is executed before the page finishes loading, thus, the state is lost before the page finishes loading.

So window.open has Asynchronous behaviour, I have tried many solutions like:

const ww = window.open(window.location.href, '_self');

ww.onload = function() {this.setState({ showBForm: true });};

or

ww.addEventListener('load', function() {{this.setState({ showBForm: true });}, true);

And some other solutions, but they all seem absolete,

And there is no callback function for window.open().

Any idea how I can make this work?

Or at least a workaround to be able to close the tab when I click Button B

closed time in 2 months

MimoJSRepo

issue closedfacebook/react

Pass hook functions as third parameter

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? feature

What is the current behavior? hooks make components impure

What is the ~expected~ desired behavior? make components pure functions

Just spitballin' here but instead of this

import { useState } from 'react';

const MyComponent = (props,ref) => {
    const [someState,setSomeState] = useState();
}

can we pass a third argument to components like this:

const MyComponent = (props,ref,{useState}) => {
    const [someState,setSomeState] = useState();
}

Something about pure functions...

closed time in 2 months

akmjenkins

issue commentfacebook/react

Pass hook functions as third parameter

Stateful components are by definition impure; they will return different values as the state they depend on changes. This would be true whether the hooks were passed as arguments or not, so I think it's unlikely that we'd make this change. Thanks!

akmjenkins

comment created time in 2 months

issue closedfacebook/react

Multiple React Context Issue

Multiple React Context Issue

closed time in 2 months

khaled-al-aydi

issue commentfacebook/react

React.memo breaks generic components argument type inference

We don't currently maintain the TypeScript definitions. You should file in an issue in the DefinitelyTyped repo.

SQReder

comment created time in 2 months

issue closedfacebook/react

React.memo breaks generic components argument type inference

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Currently, React.memo breaks generic components type inference.

interface Props<T> {
  value: T;
  setValue: (value: T) => void;
}

function GenericComponent<T>({ value }: Props<T>) {
  return <div>{value}</div>;
}

const MemoizedGenericComponent = memo(GenericComponent);

const App: React.FC = () => {
  const [value, setValue] = useState(0);
  return (
    <>
      <GenericComponent value={value} setValue={setValue} />
      <MemoizedGenericComponent value={value} setValue={setValue} />
    </>
  );
};

We have the following error:

Error:(20, 47) TS2322: Type 'Dispatch<SetStateAction<number>>' is not assignable to type '(value: unknown) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'unknown' is not assignable to type 'SetStateAction<number>'.
      Type 'unknown' is not assignable to type '(prevState: number) => number'.

Demo repository: https://github.com/SQReder/broken-memo/

What is the expected behavior?

Memoized component should have the same type inferring as an original component

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"typescript": "~3.7.2"

closed time in 2 months

SQReder

issue commentfacebook/react

react dangerouslySetInnerHTML very slowly in newest chrome

Closing since this is not a React issue.

brickspert

comment created time in 2 months

issue closedfacebook/react

react dangerouslySetInnerHTML very slowly in newest chrome

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug?

bug

What is the current behavior?

dangerouslySetInnerHTML make website so slowly, you can try to select any text in this demo:https://codesandbox.io/s/hardcore-chatelet-v83z1

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

demo:https://codesandbox.io/s/hardcore-chatelet-v83z1

What is the expected behavior?

Smooth operation

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

mac chrome 79.0.3945.88 it work fine in old chrome version or safari. maybe it's chrome’s problem?

closed time in 2 months

brickspert

issue closedfacebook/react

How can i create a dynamic ENum

This request asking about existing features supported by ReactJS. I have an enum in use on several reactJS pages(200 implementations across 32 code files). Now the requirement is to make it dynamic. I am not sure how can i achieve it in ReactJS+REDUX implementation.

I am working on the latest version of ReactJS

closed time in 2 months

ankitguptaa

issue commentfacebook/react

How can i create a dynamic ENum

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

ankitguptaa

comment created time in 2 months

startedw3c/webpayments

started time in 2 months

startedbodil/refpool

started time in 2 months

startedmicrosoft/vscode

started time in 2 months

startedkitten/bunpkg

started time in 2 months

issue commentfacebook/react

Provide a symmetric API to event.persist()

Wait. This is exactly the solution I propose. But "should" bothers me a bit.

event.prototype.release(event) is how events are released back to the pool internally when they are not persisted. It's an internal-only API I do not recommend using it in production. It's not a public API so there's no guarantees that it will work in every scenario, and I mention it only as an ad-hoc way to potentially measure if releasing back to the pool would have any benefits.

Given you went to the length of implementing event pool, seems to me odd not to harness it with mousemove - a 5 seconds drag can generate as many events as 13 minutes of clicking about.

Event pooling was implemented pretty early on, and I'm not confident that it's actually that valuable anymore. The event object allocations are likely not a bottleneck, even with events like mousemove.

If you don't need the entire event object I recommend avoiding calling event.persist() in the first place, read the values you need off of event instead, and pass those around.

const onMouseMove = event => {
  const clientX = event.clientX; 
  // whatever properties you need...
  scheduleMouseMove(clientX, /* ... */)
}

Lastly, you can probably just wrap your root mousemove listener with rafSchedule and avoid having to pass around the event object in the first place.

Here's an example using the raf-sch crate with onMouseMove

// Wrap the root listener with the scheduler rather
// than having a second function you call yourself.
const onMouseMove = rafSchedule(event => {
  console.log('mouse move!')
})
Izhaki

comment created time in 2 months

issue commentfacebook/react

Provide a symmetric API to event.persist()

@lzhaki are you experiencing any noticeable performance problems due to this limitation? There’s a lot of new event system exploration work being done so it’s unlikely that we’d expand the potentially-legacy event system API at this point. It might be worth it if we have a compelling case though.

To measure potential performance wins you can try to do event.constructor.release(event), which should release the event back to the pool. Does that have a noticeable effect?

Izhaki

comment created time in 2 months

issue commentfacebook/react

Error: "Could not find node with id "26038" in commit tree"

Duplicate of #16446

dmitryrn

comment created time in 2 months

issue closedfacebook/react

Error: "Could not find node with id "26038" in commit tree"

Describe what you were doing when the bug occurred:

  1. Start profile recording
  2. Click once a component (some components will hide)
  3. Stop profile recording
  4. Click "Ranked" tab

Please do not remove the text below this line

DevTools version: 4.2.1-3816ae7c3

Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157108 at Map.forEach (<anonymous>) at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157054) at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157577) at vl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314907) at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907) at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107381) at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715) at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640) at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)

Component stack: in vl in div in div in div in wo in Unknown in n in Unknown in div in div in Li in $e in dn in Ca in Pc

closed time in 2 months

dmitryrn

create barnchaweary/react-stripe

branch : use-read-only-exact-props

created branch time in 2 months

startedstripe/react-stripe

started time in 2 months

push eventaweary/react-stripe

Brandon Dail

commit sha 247e45e6f09fa09a37520c1638284086a052c5c9

Disable require-default-props lint rule The require-default-props lint rule was being overly restrictive for this use case. There is no good reason to include a value in `defaultProps` if it is truly optional, as that just means that React now has to do the work to merge this `undefined` value into props for no reason. I'd argue that you should just avoid `defaultProps` all together and use destructuring with default values, but that's maybe more personal preference.

view details

push time in 2 months

PR opened stripe/react-stripe

Disable require-default-props lint rule

Summary & motivation

The require-default-props lint rule was being overly restrictive for this use case. There is no good reason to include a value in defaultProps if it is truly optional, as that just means that React now has to do the work to merge this undefined value into props for no reason.

I'd argue that you should just avoid defaultProps all together and use destructuring with default values, but that's maybe more personal preference.

Testing & documentation

yarn build completes successfully

+1 -2

0 comment

2 changed files

pr created time in 2 months

create barnchaweary/react-stripe

branch : fix-require-default-props

created branch time in 2 months

pull request commentfacebook/react

ignore me

Screen Shot 2019-12-13 at 12 02 36 PM

gaearon

comment created time in 2 months

PR opened stripe/react-stripe

Enable eslint-plugin-react-hooks, fix violations

Summary & motivation

Poking around I noticed that eslint-plugin-react-hooks was already a dependency, but it wasn't enabled. This is an important plugin when using React Hooks as it prevents potentially undefined behavior.

This enables eslint-plugin-react-hooks making rules-of-hooks and error and exhaustive-deps a warning, and also fixes any existing violations uncovered.

Testing & documentation

  • yarn build runs successfully
+10 -7

0 comment

3 changed files

pr created time in 2 months

create barnchaweary/react-stripe

branch : enable-react-hooks-lint

created branch time in 2 months

fork aweary/react-stripe

React components for Stripe.js and Stripe Elements https://stripe.com/elements

fork in 2 months

issue commentfacebook/react

ReactFiberBeginWork: finishClassComponent: сheck `instance` before call of `instance.render`

In what scenario is instance undefined here? Can you please share a code example that reproduces the problem?

vithar

comment created time in 2 months

issue closedfacebook/react

Error: "Could not find node with id "5" in commit tree"

Describe what you were doing when the bug occurred: 1. 2. 3.


Please do not remove the text below this line

DevTools version: 4.2.1-3816ae7c3

Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157108 at Map.forEach (<anonymous>) at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157054) at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157577) at vl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314907) at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907) at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107381) at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715) at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640) at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)

Component stack: in vl in div in div in div in wo in Unknown in n in Unknown in div in div in Li in $e in dn in Ca in Pc

closed time in 2 months

petersantoso94

issue commentfacebook/react

Error: "Could not find node with id "5" in commit tree"

Duplicate of #16446

petersantoso94

comment created time in 2 months

issue closedfacebook/react

variable declaration is not working in eval

eval(var a = 10); console.log(b) this works in normal javascript code and variable is declared in outer scope.

But when I do the same in the render function, it doesn't work.

Some react Guru please help.

closed time in 2 months

mayank-kansal15

issue commentfacebook/react

variable declaration is not working in eval

This doesn't really have anything to do with React. I also recommend avoiding eval at all costs.

mayank-kansal15

comment created time in 2 months

issue commentfacebook/react

provide a api that convenience reset value to init

This is a relatively niche use case and solvable by building your own hook. If you need help with that I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

zhangenming

comment created time in 2 months

issue closedfacebook/react

provide a api that convenience reset value to init

Do you want to request a feature or report a bug? feature

function CandyDispenser() {
  const initialCandies = ['snickers', 'skittles', 'twix', 'milky way']
  const [candies, setCandies] = React.useState(initialCandies)
  return  <button onClick={() => setCandies(initialCandies)}>refill</button>
}

if we have a way to get the initialCandies from api, so we can like that 1, from return of useState

function CandyDispenser() {
  const [candies, setCandies, init] = React.useState( ['snickers', 'skittles', 'twix', 'milky way'])
  return  <button onClick={() => setCandies(init)}>refill</button>
}

2, from react

import {init} from react
function CandyDispenser() {
  const [candies, setCandies] = React.useState( ['snickers', 'skittles', 'twix', 'milky way'])
  return  <button onClick={() => setCandies(init)}>refill</button>
}

3 from static symbol useState

function CandyDispenser() {
  const [candies, setCandies] = React.useState( ['snickers', 'skittles', 'twix', 'milky way'])
  return  <button onClick={() => setCandies(useState.init)}>refill</button>
}

closed time in 2 months

zhangenming

issue closedfacebook/react

promise and setTimeout will run twice

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? bug What is the current behavior?

export { V as App }
function V() {
  const [count, countSet] = useState()//if we annotation thie line will be ok
  console.log('sync')
  Promise.resolve().then(() => console.log('promise'))
  setTimeout(() => {
    console.log('timeout')
  })
  return 1
}```

closed time in 2 months

zhangenming

issue commentfacebook/react

promise and setTimeout will run twice

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

zhangenming

comment created time in 2 months

issue closedfacebook/react

Error: "Could not find node with id "836" in commit tree"

Describe what you were doing when the bug occurred: 1. 2. 3.


Please do not remove the text below this line

DevTools version: 4.2.1-3816ae7c3

Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157108 at Map.forEach (<anonymous>) at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157054) at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157577) at vl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314907) at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907) at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107381) at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715) at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640) at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)

Component stack: in vl in div in div in div in wo in Unknown in n in Unknown in div in div in Li in $e in dn in Ca in Pc

closed time in 2 months

disko998

issue commentfacebook/react

Error: "Could not find node with id "836" in commit tree"

Duplicate of #16446

disko998

comment created time in 2 months

issue closedfacebook/react

Using 'null' on key prop

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? Feature

What is the current behavior? Keys are always needed on iterated elements.

We should be able to pass null to the key prop, on iterated elements. Sometimes, we don't really need performance on so simple components that doesn't update frequently, and wouldn't do any bad if it have to re-render all the generated elements. Having to take some time to think about how to generate a key in every specific case can be a pain, like when we can't just use the index, or don't trust random generations.

I don't think it should also apply to undefined value, as it wouldn't encourage new programmers to learn and use key prop. Null should only be applied to those specific cases where we don't really care about performance.

Thanks!

closed time in 2 months

SrBrahma

issue commentfacebook/react

Using 'null' on key prop

Closing for the reasons that @embeddedt and others have pointed out.

SrBrahma

comment created time in 2 months

startedrust-analyzer/rust-analyzer

started time in 2 months

fork aweary/prettier

Prettier is an opinionated code formatter.

https://prettier.io

fork in 2 months

startedrust-analyzer/rowan

started time in 2 months

startedAdapton/adapton.rust

started time in 2 months

startedsalsa-rs/salsa

started time in 2 months

issue commentfacebook/react

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

Luzmario1708

comment created time in 2 months

issue closedfacebook/react

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function

I'm doing an exercise to understand a little more react native, I'm working FlagtList to show a list but I'm throwing the following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

Stack trace:
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5716:10 in createFiberFromTypeAndProps
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5744:4 in createFiberFromElement
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9001:8 in reconcileSingleElement
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9085:14 in reconcileChildFibers
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11007:6 in reconcileChildren
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11755:4 in updateHostComponent
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17276:21 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
  node_modules/react/cjs/react.development.js:335:31 in setState
  App.js:55:18 in _callee$
  node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:271:30 in invoke

The code I am implementing is as follows:

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlagtList } from 'react-native';

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});


export default class App extends Component {
   
  state = {
    loading: true,
    users: [] // Esto es un arreglo vacio el cual guardara los datos que se trae
  };

  constructor(props) {   
    super(props)
    this.fetchUsers()    
  }

  fetchUsers = async () => {
    
    const respuesta = await fetch('https://jsonplaceholder.typicode.com/users');

    const pre = await respuesta.json();

    const usersjson = pre.map( x => ({ ...x, key: String(x.id) }));

    this.setState({ users: [usersjson.name], loading: false });

  }

  render() {

    const { loading, users } = this.state;

    if ( loading ) {
      return (
        <View style={ styles.container }>
          <Text>Por Favor espere... </Text>
        </View>
      );
    }

    return <View>
      <FlagtList
        data={ users }
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>;
  }

}

I don't know why I get the error and try to execute the project and I still get the same error.

I'm running it with yarn start.

I appreciate the help you can give me.

Thanks

closed time in 2 months

Luzmario1708

issue closedfacebook/react

How authorize web application and manage sessions

i am building a single page react app that uses redux as state manager and an express node js as backend server but i don't know what is the best way to authorize my users in the application!

if it was php or express-js website i could use PHPSESSION or express-session to manage users sessions data but now the single page web application is separated from the backend and i can't manage sessions like before!

my idea is to make a session id for each new web request then save it for client in local storage then in the server store all needed informations in a database and when application have an api call send that id in request header then we can check authorizations by using that implemented session

but i thought if there was a simpler way to handle this problem that have no need to make a session implementation by myself

(i don't want to use third party services like firebase or okta or save all session data in client part like JWT)

closed time in 2 months

MAmin233

issue commentfacebook/react

How authorize web application and manage sessions

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

MAmin233

comment created time in 2 months

issue commentfacebook/react

Jest React UI - unit testing

Hey @PAAutofac! We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

PAAutofac

comment created time in 2 months

issue closedfacebook/react

Jest React UI - unit testing

I am pretty new to React and Jest unit test framework. I have my component and trying to write few unit test cases , tried few ways and unable to proceed further. Here is my code and test case. Can anyone guide /suggest the best approaches please. Non of the tests work and Thanks

React UI component Header

import React from 'react'; import { Navbar, NavbarBrand } from 'reactstrap'; import { Link } from 'react-router-dom';

const Header = ({children}) => <Navbar light className="sticky-top navbar-expand-lg navbar-toggleable-sm bg-white border-bottom"> <NavbarBrand tag={Link} to="/">Abc: Portal</NavbarBrand> <div className="d-flex w-100 justify-content-end"> {children} </div> </Navbar>

export default Header Tests - First two test cases passes, the third test case fails with error Expected is "" for received is "undefined " could anyone please guide me in the right direction.

import React from 'react' import { shallow, mount } from 'enzyme'; import { Navbar, NavbarBrand } from 'reactstrap'; import { cleanup } from '@testing-library/react'; import renderer from 'react-test-renderer'; import { render, unmountComponentAtNode, ReactDOM } from "react-dom"; import { act } from "react-dom/test-utils"; import GlobalSettings from './../features/Header/GlobalSettings'; import UserDisplayName from './../features/Header/UserDisplayName'; import { Link, MemoryRouter } from 'react-router-dom'; import Header from './../features/Header/';

import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

// automatically unmount and cleanup DOM after the test is finished. afterEach(cleanup);

let container = null; beforeEach(() => { // setup a DOM element as a render target container = document.createElement("div"); document.body.appendChild(container); });

afterEach(() => { // cleanup on exiting unmountComponentAtNode(container); container.remove(); container = null; });

test('renders correctly', () => { const tree = shallow( <NavbarBrand> Damage Matrix: Customer Portal </NavbarBrand> );

expect(tree).toMatchSnapshot();

});

test('renders correctly', () => { const tree = renderer.create( <NavbarBrand> Damage Matrix: Customer Portal </NavbarBrand> ).toJSON();

expect(tree).toMatchSnapshot();

}); test('test Header', () => { act(() => { render(<MemoryRouter><Header /></MemoryRouter>, container); }); expect(container.children.afterEach).toBe("");

act(() => {
    render(<MemoryRouter><Header children="Hello" /></MemoryRouter>, container);
});
expect(container.appendChild).toBe("Hello");

act(() => {
    render(<MemoryRouter><Header>Testing Hello Children</Header></MemoryRouter>, container);
});
expect(container.appendChild).toBe(<UserDisplayName />);

});

closed time in 2 months

PAAutofac

issue commentfacebook/react

Error: "Could not find node with id "275099" in commit tree"

Duplicate of #16446

askirmas

comment created time in 2 months

issue closedfacebook/react

Error: "Could not find node with id "275099" in commit tree"

Describe what you were doing when the bug occurred: 1. 2. 3.


Please do not remove the text below this line

DevTools version: 4.2.1-3816ae7c3

Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157108 at Map.forEach (<anonymous>) at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157054) at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157577) at vl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314907) at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907) at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107381) at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715) at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640) at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)

Component stack: in vl in div in div in div in wo in Unknown in n in Unknown in div in div in Li in $e in dn in Ca in Pc

closed time in 2 months

askirmas

issue closedfacebook/react

Error: "Could not find node with id "1758" in commit tree"

Describe what you were doing when the bug occurred: 1. 2. 3.


Please do not remove the text below this line

DevTools version: 4.2.1-3816ae7c3

Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157108 at Map.forEach (<anonymous>) at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157054) at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157577) at vl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314907) at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907) at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107381) at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715) at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640) at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)

Component stack: in vl in div in div in div in wo in Unknown in n in Unknown in div in div in Li in $e in dn in Ca in Pc

closed time in 2 months

mohsanabbas

issue commentfacebook/react

Error: "Could not find node with id "1758" in commit tree"

Duplicate of #16446

mohsanabbas

comment created time in 2 months

issue closedfacebook/react

Error: "Could not find commit data for root "1081" and commit 18"

Describe what you were doing when the bug occurred: 1. 2. 3.


Please do not remove the text below this line

DevTools version: 4.2.1-3816ae7c3

Call stack: at n.value (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:163226) at m (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:332702) at uc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:332919) at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907) at el (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:68139) at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:108547) at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715) at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640) at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:46341

Component stack: in uc in div in div in wo in Unknown in n in Unknown in div in div in Li in $e in dn in Ca in Pc

closed time in 2 months

jackton1

issue commentfacebook/react

Error: "Could not find commit data for root "1081" and commit 18"

Duplicate of #16446

jackton1

comment created time in 2 months

issue closedfacebook/react

box-shadow value is parsed the wrong way by React

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

The value of boxShadow in an element style is parsed the wrong way because the color is moved at the beginning of the value while instead it should be kept at its original position (the end).

For example, this element:

<div style={{ boxShadow: `1px 1px 1px #000` }} />

will be parsed like this:

<div style="box-shadow: rgb(0, 0, 0) 1px 1px 1px;"></div>

Major browsers like Chrome and Firefox are tolerant and will interpret the malformed CSS correctly, but the bug is causing issues on Puppeteer which fails to cast the shadow.

A fiddle shows the issue, you can see inspecting the element how the value is malformed.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I tested with React 16.12 on Ubuntu 18.11 with Chrome and Firefox. Puppeteer on an AWS Lambda machine encounters this problem too.

closed time in 2 months

flaviolivolsi

issue commentfacebook/react

box-shadow value is parsed the wrong way by React

React doesn't do any parsing for boxShadow or other inline styles. This reformatting is being done by the browser when you set style.boxShadow on the DOM element. You can easily reproduce this outside of React:

let div = document.createElement('div');
div.style.boxShadow = '1px 1px 1px #000';
console.log(div.style.boxShadow);
// "rgb(0, 0, 0) 1px 1px 1px"

If this isn't happening with Puppeteer then it sounds like a potential bug on their end.

Hope that helps!

flaviolivolsi

comment created time in 2 months

issue commentfacebook/react

Stale values for useState inside callback functions

I feel like that behavior is not very desirable. In the past, in most cases, when state was updated it was reflected on the next line within a function.

This behavior has been around since before Hooks and is important for a few reasons. Check out the official FAQ, which covers this question. Hopefully that clears things up!

alex-cory

comment created time in 3 months

issue commentfacebook/react

react-dom logs error to console when form.checkValidity() is called during render

While you should be cautious about reading from the DOM in render, that's not the reason this warning fires. It's specifically because calling checkValidity fires the invalid event which React. This event is caught and handled by React, which is already trying to handle the input event, so this warning fires.

React is correctly warning you about something you shouldn't do, but I agree that the error message here is not good. Maybe it can be caught earlier, or this scenario prevented in some other way.

nwoltman

comment created time in 3 months

Pull request review commentfacebook/react

Fix string object rendering

 function ChildReconciler(shouldTrackSideEffects) {     newChild: any,     expirationTime: ExpirationTime,   ): Fiber | null {-    if (typeof newChild === 'string' || typeof newChild === 'number') {+    if (+      typeof newChild === 'string' ||+      typeof newChild === 'number' ||+      (newChild && typeof newChild.valueOf() === 'string')

It seems unlikely that we'd want to add the overhead of calling valueOf in this code path. Especially because valueOf can end up executing arbitrary user code.

kunukn

comment created time in 3 months

issue closedfacebook/react

Route based code splitting, Loading chunk 0 failed after new deployment

We are using Suspense and route based code splitting with react 16. This uses Webpack chunks to split the code into smaller bits for different routes in the application. In production mode this produces chunks with a hash named something like 7.8817be1b.chunk.js.

The issue is that when we deploy a new production release users with the app open who client side navigate to a page requiring a new chunk get an error (they have the old bundle, so they are requesting an old no-longer existing chunk).

We are not too sure how to deal with this error, does react have any guidance around what we should do with existing users who are requesting old chunks? Can some guidance about this be added to the docs: https://reactjs.org/docs/code-splitting.html

React: 16.12.0

closed time in 3 months

lukemcgregor

issue commentfacebook/react

Route based code splitting, Loading chunk 0 failed after new deployment

We try to use this issue tracker for bug reports and feature requests for React only. While this may be an issue you encounter following the official guidance on the React website, it doesn't mean that it's a problem with React itself. As @threepointone said, this is a problem that occurs with bundling and code-splitting in general. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

lukemcgregor

comment created time in 3 months

issue closedfacebook/react

Custom hooks to api (fetch data),How can it be reused?

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? error

What is the current behavior? Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: (1) const { data: { data: comments }, loading: commentsLoading } = useHttpRequest([], "/api/getcomment", "GET"); But after I've added the data and I'm going to pull the latest data again, what's the best way to write it.

What is the expected behavior? (1)The above custom hooks can be called again in the method so you don't need to write more useState in the component

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? google browser, react cdn url.

closed time in 3 months

victorykong

issue commentfacebook/react

Custom hooks to api (fetch data),How can it be reused?

Have you tried doing what the error says? You should check out the Rules of Hooks to be sure you're using them properly.

We try to use this repo for bug reports and feature requests, and this seems like a usage question. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

victorykong

comment created time in 3 months

issue commentfacebook/react

useContext is declared at top level but value is not updated in another function

@GnanaAjana can you please share a runnable example that reproduces your problem? You can use Codesandbox to create one. Otherwise it's hard to figure out whats happening.

GnanaAjana

comment created time in 3 months

issue closedfacebook/react

map through connected component, get data of last saga call within all componenets

** want to report a bug?**

What is the current behavior?

i have a connect componenet name Section(Redux component), which render a section within a View.

Sometimes the View has more than one Section and this how i render: `/** *

  • SubViews

*/

import React, { memo, useEffect } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { createStructuredSelector } from 'reselect'; import { compose } from 'redux'; import { Box } from '@material-ui/core'; import { handleErrorStatus } from 'utils/apiUtils'; import EmptyPaper from 'components/layout/atoms/EmptyPaper'; import ViewSection from 'containers/ViewSection';

import { strings } from 'constants/strings'; import { useInjectSaga } from 'utils/injectSaga'; import { useInjectReducer } from 'utils/injectReducer'; import reducer from './reducer'; import saga from './saga'; import { loadSubViews } from './actions'; import makeSelectSubViews, { makeSelectSubViewsLoading, makeSelectSubViewsError, } from './selectors';

export function SubViews({ handleLoadViewSections, views, viewsLoading, viewsError, siteId, assessmentId, location, history, }) { useInjectReducer({ key: 'subViews', reducer }); useInjectSaga({ key: 'subViews', saga }); const pathnames = location.pathname.split('/').filter(x => x); useEffect(() => { const viewcode = pathnames[6]; if (siteId !== undefined && siteId !== null) { handleLoadViewSections(siteId, assessmentId, viewcode); } }, []);

if (viewsLoading) { return <EmptyPaper type="loading" text={strings.viewSectionsLoading} />; } if (handleErrorStatus(viewsError)) { return <EmptyPaper type="empty" text={handleErrorStatus(viewsError)} />; } if (views === null || views.length === 0) { return ( <Box p={4}> <EmptyPaper type="empty" text="no data" /> </Box> ); } return ( <> <Box p={4}> {views[0].sections.map(section => ( <ViewSection key={section.id} viewcode={views[0].viewCode} section={section} history={history} location={location} siteId={siteId} assessmentId={assessmentId} /> ))} </Box> </> ); }

SubViews.propTypes = { handleLoadViewSections: PropTypes.func.isRequired, views: PropTypes.array, viewsLoading: PropTypes.bool.isRequired, viewsError: PropTypes.bool.isRequired, siteId: PropTypes.number, assessmentId: PropTypes.string, location: PropTypes.object, history: PropTypes.object, };

const mapStateToProps = createStructuredSelector({ views: makeSelectSubViews(), viewsLoading: makeSelectSubViewsLoading(), viewsError: makeSelectSubViewsError(), });

function mapDispatchToProps(dispatch) { return { handleLoadViewSections: (siteId, assessmentId, viewcode) => { dispatch(loadSubViews(siteId, assessmentId, viewcode)); }, }; }

const withConnect = connect( mapStateToProps, mapDispatchToProps, );

export default compose( withConnect, memo, )(SubViews); `

and my Section code is:

`/** *

  • ViewSection

*/

import React, { memo, useEffect, useCallback } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import SectionTitle from 'components/layout/atoms/SectionTitle'; import QuestionsPanel from 'components/sections/QuestionsPanel'; import { createStructuredSelector } from 'reselect'; import { compose } from 'redux'; import Location from 'containers/sections/Location'; import Assets from 'containers/sections/Assets'; import Threats from 'containers/sections/Threats'; import { useInjectSaga } from 'utils/injectSaga'; import { useInjectReducer } from 'utils/injectReducer'; import { makeSelectQuestions, makeSelectQuestionsLoading, makeSelectQuestionsError, } from './selectors'; import reducer from './reducer'; import saga from './saga'; import { loadQuestions, updateAnswer } from './actions'; import { makeSelectDescriptors, makeHelperDataSelector, } from '../Site/selectors'; import { toggleHelpPanel } from '../Site/actions';

export function ViewSection({ section, viewcode, siteId, assessmentId, history, location, handleLoadQuestions, questions, loading, error, handleUpdateAnswer, descriptors, helperData, handletoggleHelpPanel, }) { useInjectReducer({ key: 'viewSection', reducer }); useInjectSaga({ key: 'viewSection', saga }); console.log('ViewSection()'); console.log(section); // console.log(viewcode); useEffect(() => { console.log('ViewSection() useEffect()'); if (section.contentType === 'Questions') { handleLoadQuestions( siteId, assessmentId, viewcode, section.sectionCode, descriptors, ); } }, [section]);

const onHandleUpdateAnswer = useCallback((answer, answerId) => { handleUpdateAnswer(siteId, assessmentId, answer, answerId); }, []);

if (section.contentType === 'Locations') { return ( <Location history={history} location={location} siteId={siteId} assessmentId={assessmentId} section={section} loading={loading} error={error} /> ); } if (section.contentType === 'Assets') { return ( <Assets history={history} location={location} siteId={siteId} assessmentId={assessmentId} section={section} /> ); } if (section.contentType === 'Threats') { return ( <Threats history={history} location={location} siteId={siteId} assessmentId={assessmentId} section={section} /> ); }

const handleDrawerClose = (itemId, isDrawerOpen, ratings, colorOrder) => { handletoggleHelpPanel({ itemId, isDrawerOpen, ratings, colorOrder }); }; console.log('ViewSection() render'); console.log(questions)

if (section.contentType === 'Questions') { return ( <QuestionsPanel headingText={section.title} helperData={helperData} handleDrawerClose={handleDrawerClose} key={section.id} loading={loading} error={error} questionsList={questions} handleAnswerSubmit={onHandleUpdateAnswer} /> ); }

return ( <div> <SectionTitle text={section.title} /> </div> ); }

ViewSection.propTypes = { section: PropTypes.object.isRequired, // from parent compoenent viewcode: PropTypes.string.isRequired, // the view code from parent location: PropTypes.object, history: PropTypes.object, siteId: PropTypes.number, assessmentId: PropTypes.string, handleLoadQuestions: PropTypes.func, questions: PropTypes.array, loading: PropTypes.bool, error: PropTypes.any, handleUpdateAnswer: PropTypes.func, descriptors: PropTypes.array.isRequired, helperData: PropTypes.object, handletoggleHelpPanel: PropTypes.func, };

const mapStateToProps = createStructuredSelector({ questions: makeSelectQuestions(), loading: makeSelectQuestionsLoading(), error: makeSelectQuestionsError(), descriptors: makeSelectDescriptors(), helperData: makeHelperDataSelector(), });

function mapDispatchToProps(dispatch) { return { handleLoadQuestions: ( siteId, assessmentId, viewcode, sectioncode, descriptors, ) => { dispatch( loadQuestions(siteId, assessmentId, viewcode, sectioncode, descriptors), ); }, handleUpdateAnswer: (siteId, assessmentId, updatedAnswer, answerId) => { dispatch(updateAnswer(siteId, assessmentId, updatedAnswer, answerId)); }, handletoggleHelpPanel: (action, helperData) => { dispatch(toggleHelpPanel(action, helperData)); }, }; }

const withConnect = connect( mapStateToProps, mapDispatchToProps, );

export default compose( withConnect, memo, )(ViewSection); `

Now, when my page renders, i get list of sections with their own headings but i get same lits of questions within all the sections.

this screen schot of console will explain it better console

What is the expected behavior?

it is expected when i map through my connected component, each one triggers it's own saga and reducer and render its own related question list

closed time in 3 months

ArouiniLobna

issue commentfacebook/react

map through connected component, get data of last saga call within all componenets

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

ArouiniLobna

comment created time in 3 months

issue closedfacebook/react

Stale values for useState inside callback functions

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? potential bug

What is the current behavior? When calling setState from useState, the state value is stale from inside a function. The value is correct inside the body of the component, but not inside the function itself.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: Begin by typing a@g which should autocomplete to a@gmail.com. You will see the expected and actual values for the input below each. https://codesandbox.io/s/useemailautocomplete-material-ui-04423

What is the expected behavior? It should have the correct value for email inside the handleChange function.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React: v16.12.0 Browser: chrome OS: Catalina

closed time in 3 months

alex-cory

issue commentfacebook/react

Stale values for useState inside callback functions

When you call setState React doesn't always updated the state synchronously. So even though you've called handleEmailChange the email value has not yet been updated while handleChange is still executing.

You can see this behavior in this much simpler example. If you need to use the latest state value in handleChange, just use the value you passed to setState

alex-cory

comment created time in 3 months

issue closedfacebook/react

CSS Not Being Applied (or Overwritten?) Route Based Code Splitting

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? Bug

What is the current behavior?

At our website, we have a branch where we're converting to route based code splitting to reduce bundle sizes. The issue now is that our global index.scss properties aren't be applied to the lazy loaded modules. This is breaking things like our font faces / <a> tag styling.

// routes.ts BEFORE
import Home from '../components/home');

const Routes: React.FC = () => (
    <Switch>
      // ...
      <Route exact path="/" component={Home} />
      <Redirect from="*" to="/" />
    </Switch>
);
// routes.ts AFTER
const Home = lazy(() => import('../components/home'));

const Routes: React.FC = () => (
  <Suspense fallback={/*...*/}>
    <Switch>
      // ...
      <Route exact path="/" component={Home} />
      <Redirect from="*" to="/" />
    </Switch>
  </Suspense>
);

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

N/A because of reliance on bootstrap but the link to the branch

  1. Clone Branch
  2. install deps for react-app
  3. npm start

/teams wont' work but all of the text is left aligned on the cards and the link are normal blue and underlined (I can provide pictures if needed). You can compare this to the live site here.

What is the expected behavior? The global css should be applied the same, lazy loaded or not.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? All Browsers. No idea on older versions.

closed time in 3 months

rag4214

issue commentfacebook/react

CSS Not Being Applied (or Overwritten?) Route Based Code Splitting

This doesn't seem related to React. You'll have to dig into your build system to see what's going on. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

rag4214

comment created time in 3 months

issue commentfacebook/react

Getting error while redirect to the home page

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

vengatbap

comment created time in 3 months

issue closedfacebook/react

Getting error while redirect to the home page

Hi,

i was trying to restrict logged in user to access login page using following code

import React, { useEffect, useState } from "react";
import { Route } from "react-router-dom";
import { Redirect } from "react-router-dom";

const UserLayoutRoute = ({ component: Component, ...rest }) => {
  const [loggedIn, setLoggedIn] = useState(null);
  useEffect(() => {
    if (localStorage.getItem("cachedValue") !== null) {
      setLoggedIn(true);
    }
  }, []);
  return loggedIn ? (
    <Route
      {...rest}
      render={matchProps => (
        <div className="App">
          <section className="user-page">
            <div className="">
              <div className="">
                <Component {...matchProps} />
              </div>
            </div>
          </section>
        </div>
      )}
    />
  ) : (
    <Redirect to="/"  />
  );
};

export default UserLayoutRoute;

with this code page keep on loading and its not rendering anything.Please help me to get out from this.

closed time in 3 months

vengatbap

issue commentfacebook/react

Error: "Could not find node with id "5203" in commit tree"

cc @bvaughn

jonasthiesen

comment created time in 3 months

issue commentfacebook/react

Error: "Could not find node with id "490" in commit tree"

Thanks for reporting, marking as a duplicate of #17500

rgehan

comment created time in 3 months

issue closedfacebook/react

Error: "Could not find node with id "490" in commit tree"

I wasn't doing anything too fancy:

  • Ran a really quick profile
  • Clicked on the ranked tab

Please do not remove the text below this line

DevTools version: 4.2.1-3816ae7c3

Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157108
    at Map.forEach (<anonymous>)
    at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157054)
    at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157577)
    at vl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314907)
    at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907)
    at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107381)
    at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715)
    at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640)
    at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)

Component stack: in vl
    in div
    in div
    in div
    in wo
    in Unknown
    in n
    in Unknown
    in div
    in div
    in Li
    in $e
    in dn
    in Ca
    in Pc

closed time in 3 months

rgehan

issue commentfacebook/react

Error: "Could not find node with id "5021" in commit tree"

Thanks for reporting, marking as a duplicate of #17500

talolard

comment created time in 3 months

more