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!

The children of `` is a function that returns childrens, i think thats why the error — Vencovsky, Feb 05 '19 at 12:00
Is Subscribe your custom Component ? If so can you please share that — Shubham Khatri, Feb 05 '19 at 12:01
@ShubhamKhatri, no, Subscribe is a custom Unstated component — Rohr Facu, Feb 05 '19 at 12:03

score 1 · Accepted Answer · answered Feb 05 '19 at 12:09

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())

answered Feb 05 '19 at 12:09

Vencovsky

28,550
17
109
176

2

Your answer gave me a clue to resolve the issue, i decided to move the logic of rendering the notes to another function. return ( {noteContainer => ( noteContainer.showNotas() )} ) – Rohr Facu Feb 05 '19 at 13:09

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

1 Answers1