Skip to content

[4.0.0.rc-9] Immutable renders a Map's key in React 16 #1430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
athomann opened this issue Oct 30, 2017 · 8 comments
Closed

[4.0.0.rc-9] Immutable renders a Map's key in React 16 #1430

athomann opened this issue Oct 30, 2017 · 8 comments

Comments

@athomann
Copy link

What happened

Updated a Repo to React 16 and discovered that iterating over a Map will render the return item && the key. I realize using Maps as children is experimental but thought you'd like to know. Not sure if this would be considered a react 16 bug.

What I expected:
Render the React element and ignore the key.

How to reproduce

type ItemMap = Map<*, *>;
const itemMap: ItemMap = Map({
  0: 'zero',
  1: 'one',
  2: 'two',
});

{itemMap.map((item, index) => (
  <Item key={index} item={item} />
)}

will render something like 0 <Item /> 1 <Item /> 3 <Item />
@athomann athomann changed the title [4.0.0.rc-9] Immutable renders a Maps key in React 16 [4.0.0.rc-9] Immutable renders a Map's key in React 16 Oct 30, 2017
@kentor
Copy link

kentor commented Oct 30, 2017

I believe this is the same behavior in React 15 and Immutable 3.x

Use valueSeq:

{itemMap.valueSeq().map((item, index) => (
  <Item key={index} item={item} />
)}

@athomann
Copy link
Author

athomann commented Oct 30, 2017 •
edited
Loading

The branch I'm working on used immutable 3.x and react 15 and didn't experience this issue. Only once I upgraded to React 16 did it occur.

But I will try valueSeq. Thanks!

@ghost
Copy link

ghost commented Nov 8, 2017 •
edited by ghost
Loading

Hey Thanks It worked for me! @kentor const all = data.posts.valueSeq().map((obj, key) => {;

@ntcuong
Copy link

ntcuong commented Feb 26, 2018

I also have the same problem.

@s2s2kim
Copy link

s2s2kim commented Apr 16, 2018 •
edited
Loading

had same problem here but fixed with kentor's advice. Btw does anyone know 'why' it happened?

@acusti
Copy link
Contributor

acusti commented May 2, 2018 •
edited
Loading

@s2s2kim It happened with the change over to React 16’s “Fiber” renderer. I suspect it is somehow related to the fundamental changes in rendering arrays and iterables that allows for React.Fragment and the like, but that’s just speculation on my part.

For maintainers, note that this issue is solved and can be closed.

@olwen1987
Copy link

Experienced this. Was surprised from where the dummy text was rendering from

@Methuselah96 Methuselah96 mentioned this issue Oct 17, 2020
Open
@jdeniau
Copy link
Member

jdeniau commented Mar 20, 2025 •
edited
Loading

Hi, mapping on a Map will, effectively, return a new Map, and there has been a chance in the toArray function in #1340.
That's clearly not what you want in React, you should use .valueSeq before.

@jdeniau jdeniau closed this as completed Mar 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@kentor @acusti @athomann @jdeniau @olwen1987 @ntcuong @s2s2kim