Variables not changing from React setState simultaneously

Question

We have a table of users in a workflow where each user has a different status based on which step they are in the workflow. For ease of the example, lets say there are 4 steps from 1-4.

Each user has a button on their table row that when clicked, opens up a modal that grabs their userId and current step as data values.

handleClick = (event) => {
    let step = event.target.dataset.step;
    let id = event.target.dataset.id;
    this.setState({ currentStep: step, userId: id, moveUserModal: true });
}
.........
<Modal
    isOpen={this.state.moveUserModal}
>
    <UserModal step={this.state.currentStep} userId={this.state.userId} close={this.close} />
</Modal>

And in the modal:

constructor(props) {
    super(props);
    console.log(this.props);
}

the console log returns undefined for the two vars and f() for close. If moveUserModal is true, is there a reason that the other vars wouldnt already have a value the constructor can access?

try putting your console.log in the render() method of the modal. Constructor is not called when parent re-renders — stackoverfloweth
– stackoverfloweth, Commented Aug 22, 2018 at 15:00
also, you put a log in the handleClick to confirm that the values are being set correct? — stackoverfloweth
– stackoverfloweth, Commented Aug 22, 2018 at 15:01

Anas · Accepted Answer · 2018-08-22 15:05:05Z

1

There is nothing preventing your UserModal from mouting from the beginning.

When your parent component is mounting, your UserModal is also mounting and the constructor is already called with undefined.

Maybe try with something like:

<Modal isOpen={this.state.moveUserModal} >
    this.state.moveUserModal && <UserModal step={this.state.currentStep} userId={this.state.userId} close={this.close} />
</Modal>

answered Aug 22, 2018 at 15:05

Anas

5,7455 gold badges43 silver badges72 bronze badges

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

1 Comment

mikeg542 Over a year ago

We totally had something like this elsewhere in the project and I missed it. Thanks!

Collectives™ on Stack Overflow

Variables not changing from React setState simultaneously

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related