You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
please run the js fiddle given above. cloneElement copies the children into props.children of the child itself
and if the child also renders its children using the same method - an infinite loop is established and the browser maximum call stack size is exceeded.
Ideally, while cloning the children property of the props of the child should be left untouched.
The text was updated successfully, but these errors were encountered:
This looks like correct behavior. children is part of props. If you pass this.props as second argument to cloneElement, children will be there. I don’t see why you’d expect them to be treated differently in this case, since children prop is not treated differently in any other cases.
Maybe we can provide a toggle or blacklist of props that we do not want to merge in such scenarios.
Here is my scenario. I am building an application using react, redux, and react-redux.
I have mapped my state values and action dispatch methods to props in my root component.
I have nested components in my application thanks to react-router. In order to pass state and dispatch methods as props to children i use
Now the issue is that when i use the same statement in a child to further pass down the pass state and dispatch methods as props - It renders itself which in turn again renders itself and so on - kicking in an infinite loop.
I understand, but this is a very specific use case, and rather than bake it into React, I think it should be solved in userland. There are plenty of use cases where you wantchildren to be passed so we will default to a less opinionated way, and it’s up to you to opt out and clarify what you meant with code.
const{ children }=this.props;constotherProps=Object.assign({},this.props);deleteotherProps.children;constnewChild=React.cloneElement(children,otherProps);
https://jsfiddle.net/69z2wepo/55774/
please run the js fiddle given above.
cloneElement
copies the children into props.children of the child itselfand if the child also renders its children using the same method - an infinite loop is established and the browser maximum call stack size is exceeded.
Ideally, while cloning the children property of the props of the child should be left untouched.
The text was updated successfully, but these errors were encountered: