React this.props.children.apply is not a function

Question

I'm making a react app with unstated to manage the state of my app, the application is a simple CRUD of notes.

I have a NoteList component to render the list of Notes. This is my render() function in NoteList Component:

render() {
        return (
            <Subscribe to={[NoteContainer]}>
                {noteContainer => (
                    noteContainer.state.isLoaded ?
                        (
                            noteContainer.state.notas.map((note, i) => {
                                return (<Note note={note} index={i} onRemoveNote={this.removeNote} onEditNote={this.saveEditNote} key={i}></Note>)
                            })
                        )
                        :
                        (
                            <div>Loading Notes...</div>
                        )
                    )}
                )}
            </Subscribe>
        )
}

However, when i load the page, i get the following error:

this6.props.children.apply is not a function

And in the chrome console the next description:

The above error occurred in the component: in Consumer (created by Subscribe) in Subscribe (at NoteList.js:19) in NoteList (at App.js:160) in Provider (created by Consumer) in Consumer (created by Provider) in Provider (at App.js:159) in App (at src/index.js:7)

I have no clue on what could be the source of this error, if anyone can give me any help i would appreciate it!

Thanks in advance, have a nice day!

Answer 1

The children of <Subscribe /> is a function that returns array of childrens, thats why the error. To check it, inside <Subscribe />, you could do console.log(this.props.children)and you will see that it's an array, you can't use apply in an array, you need to loop through and apply it to each children

this.props.children.map(children => children.apply())