0

I tried to use parentCallback and I got this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'addPane')

addPane is my callbackFunction.

var elementItems = this.state.items.split('·').map(function (item) {
            count++
            return <Pane key={item + count} parentCallback={this.addPane} items={item}></Pane>
        })

Here I used parentCallback to let my child component, <Pane> use the function (run it)

This is my pane component. When the content changes (user edits it) I want to run the parentCallback function.

class Pane extends React.Component {
    constructor(props) {
        super(props)
    }
    render () {
        var items = this.props.items.split('·')
        return (
            <div className={items[0].split('|')[2]}>
                <h1 contentEditable="true" suppressContentEditableWarning={true} className="title newp">{items[0].split('|')[0]}</h1>
                <p contentEditable="true" suppressContentEditableWarning={true} className="description newp">{items[0].split('|')[1]}</p>
            </div>
        )
    }
}

Basically, I use parentCallback as a prop send to the child, Pane.

I then put a onChange in the child, Pane that tries to run parentCallback which is also just a function.

I expect there to be no error.

I want the parentCallback to run addPane.

I tried to give it keys and not much.

If you actually need full code, I can give it to you, but, you probably don't need it (it's a private repo).

  • The `this` in the `map` callback is not what you expect it to be. Use an arrow function instead. – Bergi Dec 04 '22 at 21:40

0 Answers0