Render surfaces dynamically

[swennemans]

Currently I'm trying to render a scrollview based on data it will fetch from the server. However I'm encountering some problems. It seems that when knowing the number of surfaces on render beforehand everything will render fine. This will work:

render() {
        let famousSurfaces = range(3).map((event, idx) => {
            let options = {//};
            return (
                <Surface options={options}>
                    Surface {idx + 1}
                </Surface>
            );
     });
     return (
            <Context>
                <View>
                    {famousSurfaces}
                </View>
            </Context>
        )
    }

However, I would like to render my surfaces dynamically based on my props. This props can change because the data doesn't appear all at once. A simple example is this:

render() {
        let famousSurfaces = this.props.events.map((event, idx) => {
            let options = {//};
            return (
                <Surface options={options}>
                    Surface {idx + 1}
                </Surface>
            );
     });

///etc

I've tried some alternative ways to work around it, but with no luck. The above sample is the most simple example, and working with normaal divs this would work.

[pilwon]

@swennemans What error message or unexpected result did you see with your code

I've just tried with a quick example code using props for surface construction and it seems to work fine.

[swennemans]

@pilwon No error message. If I look in my elements tab of google chrome, the famous elements are there but are not displayed in my browser.

I'm using a flux implementation, but tried to recreate the issue with react only. I've added a vanilla approach and a famo.us approach. Hopefully this make my problem more clear :)

https://gist.github.com/swennemans/ea3e9adcd25ad66717ee

[pilwon]

@swennemans The gist you shared doesn't use a Scrollview. Are you having an issue with surfaces in a Scrollview or in a View?

[swennemans]

@pilwon I've tried to extract the problem as minimal as possible, I didn't want to make it more confusing. But the issue is the same in a View or ScrollView: the different surfaces are created but not rendered on screen when added later using props or state. Here is another gist but this time with the scrollview. https://gist.github.com/swennemans/facdf079e970b087f0a8

To display the problem better I've added screenshot. Even though the number of surfaces are 8 (also see the elements tab) only the initial number (3) of surfaces are displayed.