CODEWITHSUNDEEP
javascriptreactjsreact-native
erol_smsr
erol_smsr

Reputation: 1496

Can't render a component on top of another in React

I have a view that should have a title and a list of items. I generate the list of item components using Lodash/_.map. It looks like this:

prepareEnrollmentsRender = () => {
    return (
        <Header {...this.c('overviewTitle')}>Current enrollments</Header>,
        _.map(this.TEST__enrollments, 
            (enrollment, index) => (
                <Enrollment
                    enrollmentName={enrollment}
                    key={index}
                    id={index}
                    onSelect={() => {this.onEnrollmentPress(index)}} />
            )
    ));
}

And then in the render I call the function to render everything. The problem is that the Header component does not appear. I render them like this:

render = () => {
    <View>
        {this.prepareEnrollmentsRender()}
    </View>
}

Note: This React app is being developed within a framework, so some unknown components like Header are valid internal components, as well as things like {...this.c()}, etc. Those are NOT part of the issue.

Upvotes: 1

Views: 863

Answers (1)

jonahe
jonahe

Reputation: 5000

Wrap the output of prepareEnrollmentsRender in an extra div surrounding both Header and the Enrollment array, or (possibly) try wrapping both in an array. You're returning two comma separated values. That's not valid.

Upvotes: 1

Related Questions