Error: You have to set children inside Carousel component

[gcoro]

Hi, I need to dynamically render the carousel pages from the props that I receive from the parent component, but this error Error: You have to set children inside Carousel component gets thrown. Is there any way to dynamically render pages within this carousel? Here is my code:

render() {
    return (
        this.props.pages.length > 0 && (
            <Carousel
                width={'100%'}
                height={'96%'}
                delay={3000}
                indicatorAtBottom={true}
                indicatorSize={20}
                indicatorText='✽'
                indicatorColor='red'
            >
                {this.props.pages.forEach(page => (
                    <View style={styles.contentContainer}>
                        // page content
                    </View>
                ))}
            </Carousel>
        )
    );
}

[gcoro]

My bad, closing this, I was using forEach instead of map, hence it was not returning the children elements. Using map this example works fine.

[Jacky9425]

Hi, i used map to render out the components in the carousel but its not showing any rendered component and no error is showed. I am using setState to control the content. Is it because of the state did not triggers re-rendering resulting in not rendering the components in the carousel?

[Jacky9425]

I retry the method by using redux, turns out the component does render. Should be problem with the state updates that failed to render the components.