diff --git a/compat/src/Children.js b/compat/src/Children.js index 0295d936e8..24c9c33fb1 100644 --- a/compat/src/Children.js +++ b/compat/src/Children.js @@ -1,8 +1,8 @@ import { toChildArray } from 'preact'; -const mapFn = (children, fn) => { +const mapFn = (children, fn, context) => { if (children == null) return null; - return toChildArray(toChildArray(children).map(fn)); + return toChildArray(toChildArray(children).map(fn.bind(context))); }; // This API is completely unnecessary for Preact, so it's basically passthrough. diff --git a/compat/src/index.d.ts b/compat/src/index.d.ts index ce437a1065..45c4441e0d 100644 --- a/compat/src/index.d.ts +++ b/compat/src/index.d.ts @@ -407,11 +407,13 @@ declare namespace React { export const Children: { map( children: T | T[], - fn: (child: T, i: number) => R + fn: (child: T, i: number) => R, + context: any ): R[]; forEach( children: T | T[], - fn: (child: T, i: number) => void + fn: (child: T, i: number) => void, + context: any ): void; count: (children: preact1.ComponentChildren) => number; only: (children: preact1.ComponentChildren) => preact1.ComponentChild; diff --git a/compat/test/browser/Children.test.js b/compat/test/browser/Children.test.js index 53c0c776bf..4f4f9434fa 100644 --- a/compat/test/browser/Children.test.js +++ b/compat/test/browser/Children.test.js @@ -5,6 +5,7 @@ import { } from '../../../test/_util/helpers'; import { div, span } from '../../../test/_util/dom'; import React, { createElement, Children, render } from 'preact/compat'; +import { vi } from 'vitest'; describe('Children', () => { /** @type {HTMLDivElement} */ @@ -106,6 +107,17 @@ describe('Children', () => { expect(serializeHtml(scratch)).to.equal('
0
'); }); + it('should propagate "this" context', () => { + const context = {}; + const spy = vi.fn(child => child); // noop + const Foo = ({ children }) => { + return React.Children.map(children, spy, context); + }; + render(foo, scratch); + + expect(spy.mock.contexts[0]).to.equal(context); + }); + it('should flatten result', () => { const ProblemChild = ({ children }) => { return React.Children.map(children, child => {