{"record":{"id":"3296d523ee85f17e","repo":"facebook/react","slug":"using-maps-as-children-is-not-supported-use-an-ar","errorCode":null,"errorMessage":"Using Maps as children is not supported. Use an array of keyed ReactElements instead.","messagePattern":"Using Maps as children is not supported\\. Use an array of keyed ReactElements instead\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react/src/ReactChildren.js","lineNumber":296,"sourceCode":"        child,\n        array,\n        escapedPrefix,\n        nextName,\n        callback,\n      );\n    }\n  } else {\n    const iteratorFn = getIteratorFn(children);\n    if (typeof iteratorFn === 'function') {\n      const iterableChildren: Iterable<React$Node> & {\n        entries: any,\n      } = children as any;\n\n      if (__DEV__) {\n        // Warn about using Maps as children\n        if (iteratorFn === iterableChildren.entries) {\n          if (!didWarnAboutMaps) {\n            console.warn(\n              'Using Maps as children is not supported. ' +\n                'Use an array of keyed ReactElements instead.',\n            );\n          }\n          didWarnAboutMaps = true;\n        }\n      }\n\n      const iterator = iteratorFn.call(iterableChildren);\n      let step;\n      let ii = 0;\n      // $FlowFixMe[incompatible-use] `iteratorFn` might return null according to typing.\n      while (!(step = iterator.next()).done) {\n        child = step.value;\n        nextName = nextNamePrefix + getElementKey(child, ii++);\n        subtreeCount += mapIntoArray(\n          child,\n          array,","sourceCodeStart":278,"sourceCodeEnd":314,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react/src/ReactChildren.js#L278-L314","documentation":"ReactChildren's mapIntoArray handles iterable children by using their iterator function; a Map's default iterator is entries(), which yields [key, value] arrays rather than elements, so React would try to render key-value pairs. The dev-only check compares the child's iteratorFn to children.entries and warns once, directing you to pass an array of keyed ReactElements (ReactChildren.js:296).","triggerScenarios":"Rendering a Map directly as children: <ul>{itemsMap}</ul> where itemsMap is a Map instance; or a wrapper component forwarding an arbitrary iterable that happens to be a Map.","commonSituations":"Switching keyed collections from plain objects to Map for key ordering/guaranteed string keys (i18n tables, id-to-node registries, caches) and passing them straight into JSX.","solutions":["Convert to keyed elements: Array.from(map.entries()).map(([id, item]) => <Item key={id} item={item} />)","If only values matter: [...map.values()] with a key derived from each value","Normalize at the component boundary with the isMap guard below so any iterable input is rendered deterministically"],"exampleFix":"// before\n<div>{itemsMap}</div>\n\n// after\n<div>{Array.from(itemsMap, ([id, item]) => <Item key={id} item={item} />)}</div>","handlingStrategy":"type-guard","validationCode":"// normalize any child input before rendering\nconst isMap = (x) => typeof Map === 'function' && x instanceof Map;\nfunction normalizeChildren(children) {\n  if (isMap(children)) {\n    return Array.from(children, ([key, node]) => (\n      <Fragment key={String(key)}>{node}</Fragment>\n    ));\n  }\n  return children;\n}","typeGuard":"const isMap = (x) => typeof Map === 'function' && x instanceof Map;","tryCatchPattern":null,"preventionTips":["Type children as React.ReactNode and convert Maps at the component boundary","Prefer arrays of keyed elements as the canonical children representation","Add a dev-only assertion in shared wrapper components for iterable children"],"tags":["children","maps","iterables","jsx","keys","dev-only"],"backgroundTag":"unsupported-children-type","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}