Callback not correctly updating state (ReactJS)

Question

I have two components, of the same level under the parent component and depending on what happens in one, I want it to trigger something to happen in the other component.

I have a callback function in my Parent and I passed it to one of the Child. In the child, when an Icon is clicked, I call the callback function through this.props.callback() which goes back and triggers the function in the parent. But I keep getting an error when I'm trying to update the state so that when the parent re-renders, the other component displays differently.

Parent:

    getInitialState: function() {
        return {
            activeTab: undefined,
            messages: [],
            newMessage: undefined
        }
    },

    callback: function() {
        this.setState({
            "activeTab": "newChatTab"
        });
    },

    render: function() {
        const { activeTab, recentMessages, messages, newMessage } = this.state;

        return (

            <Modal>
                <div className="sms-chat-modal">
                    <ModalSC.Header>
                        <Icon name="commenting" color="white" />
                        SMS Chat
                        <Icon onClick={ this.handleClose } name="remove" color="white" float="right" />
                    </ModalSC.Header>
                    <ModalSC.Content>

                        <SMSChatLeftNav
                            recentMessages={ recentMessages }
                            callback={this.callback}
                        />

                        <div className="tabs-wrapper">

                            { activeTab == "newChatTab" ? <ChatTab messages={ messages } newMessage={ newMessage } /> : '' }

                        </div>
                    </ModalSC.Content>
                </div>
            </Modal>
       );
    }

Child:

render: function() {
    return(
        <FilterInput className= "search-field" placeholder="Search Recent Contacts">

            <Icon onClick={this.props.callback()} name="edit" color="blue" />

        </FilterInput>
    )
}

Error:

Cannot update during an existing state transition

Tholle · Accepted Answer · 2018-07-17 18:02:03Z

1

You are invoking the callback function when you write this.props.callback(). Just give the function to onClick on the Icon instead, so the function can be invoked when the event occurs.

<Icon onClick={this.props.callback} name="edit" color="blue" />

answered Jul 17, 2018 at 18:02

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sam Over a year ago

When I'm passing the callback function as a props to the child component, should it be callback = {this.callback()} or callback = {this.callback}

Tholle Over a year ago

@Sam The second one. You don't want to invoke this.callback directly when you pass down the prop.

Sam Over a year ago

The problem now is that the icon doesn't trigger the callback. It doesn't seem to be doing anything anymore...

Tholle Over a year ago

@Sam What happens if you bind the function to this? <SMSChatLeftNav recentMessages={ recentMessages } callback={this.callback.bind(this)} />

Sam Over a year ago

Oh, I forgot to destruct props by adding callback into const { recentMessages, callback } = this.props;. It works now!

Collectives™ on Stack Overflow

Callback not correctly updating state (ReactJS)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related