Skip to content

Commit

Permalink
Don’t error when returning an empty Fragment
Browse files Browse the repository at this point in the history
Fixes #12964

When a fragment is reconciled, we directly move onto it’s children.
Since an empty `<React.Fragment/>` will have children of `undefined`,
this would always throw.

To fix this, we bail out in those cases. This case now behaves like
returning `null` directly.
  • Loading branch information
philipp-spiess committed Jun 2, 2018
1 parent 36546b5 commit 4e78ff9
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 0 deletions.
12 changes: 12 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFiber-test.js
Expand Up @@ -171,6 +171,18 @@ describe('ReactDOMFiber', () => {
expect(firstNode.tagName).toBe('DIV');
});

it('renders an empty fragment', () => {
const EmptyFragment = () => <React.Fragment />;

let instance = null;
ReactDOM.render(<EmptyFragment />, container);

expect(container.childNodes.length).toBe(0);

const firstNode = ReactDOM.findDOMNode(instance);
expect(firstNode).toBe(null);
});

let svgEls, htmlEls, mathEls;
const expectSVG = {ref: el => svgEls.push(el)};
const expectHTML = {ref: el => htmlEls.push(el)};
Expand Down
6 changes: 6 additions & 0 deletions packages/react-reconciler/src/ReactChildFiber.js
Expand Up @@ -1215,6 +1215,12 @@ function ChildReconciler(shouldTrackSideEffects) {
newChild.key === null
) {
newChild = newChild.props.children;

// In case of an empty fragment, this is undefined. Since we crash when
// undefined is reconciled, we replace this case with null.
if (typeof newChild === 'undefined') {
return deleteRemainingChildren(returnFiber, currentFirstChild);
}
}

// Handle object types
Expand Down

0 comments on commit 4e78ff9

Please sign in to comment.