Repository navigation
Rendering broken for arrays not wrapped in div #178
Description
React Easy State version: x.x.x
Platform: browser / node / react-native / other
Describe the bug
If you have an array in your store and display it without wrapping it in a div it does not render or update properly.
For the toughest bugs only
https://codesandbox.io/s/pedantic-glade-ytrwo?file=/src/App.js
- click add pet and the pet list will not update.
- comment out line 15 and comment in line 16
- Hit add pet and list will update
Activity
peteyycz commentedon Apr 28, 2020
This is not a bug with the library, but a way react works, by default if you pass an array to react it is not going to render anything.
Try changing that line to:
{user.pets.map((pet) => <span key={pet}>{pet}</span>)}And you'll see that it renders each pet in it's own span.
tnrich commentedon Apr 28, 2020
@peteyycz I think you probably didn't look very closely at the example codesandbox or actually try it. I can reproduce exactly what @tgreen7 mentioned. See below:
Also react does render arrays of valid react components. See below with an array of strings:
solkimicreb commentedon Apr 28, 2020
Some general thoughts: (scroll down for the specific issue explanation)
@peteyycz was party right that this is a very strange use-case that is only "accidentally" handled by React. React does not render objects but it does render arrays (because React elements are represented as arrays after compilation) and strings. As a result, it also handles arrays of strings.
I don't think we would change anything in the library because of this edge case only without a strong use-case from a user as it is not really real-life like. It is tightly linked with a more practical and broad issue though which may get addressed soon.
About the issue:
The component correctly re-renders, just add a console.log inside the render to see it. The freshly mutated array is not reflected in the view by React though because it did not change by reference. If you replace
{user.pets}with{[...user.pets]}it should be refreshed.This issue can also happen with complex multi-component third-party libraries. Check the "Passing nested data to third party components." for an explanation. In that case the third party component (or some of its children) is not re-rendered because the data it received as prop did not change as a reference.
I have an idea about how to solve this but it could lead to a bunch of other problems. I will reopen the issue and keep you updated here.