By Omar Hussein

2020-01-14 13:02:22 8 Comments

I think I found a react bug? I have 2 functions to show my modal, first I have a modal state like this:

    state = {
        modal: {
            requestPopUp: {
                visible: false,

and 2 functions to hide/show it

// Helper Methods
    handleOpenModal = name => {
        const modal = { ...this.state.modal };
        modal[name].visible = true;
        this.setState({ modal });

    handleCloseModal = name => {
        const modal = { ...this.state.modal };
        modal[name].visible = false;
        this.setState({ modal });

handleOpenModal works fine, however, handleCloseModal does not, it runs but doesnt alter the state.

modal[name].visible = false; This line specifically does nothing, I logged (modal,name) after it and it stays true and not false, how can I fix this??

Edit: I call my functions here: <div className="card request p-3" onClick={() => this.handleOpenModal("requestPopUp")}> Which works fine

and here <Modal show={modal.requestPopUp.visible} onHide={() => this.handleCloseModal("requestPopUp")}> Which also calls the function properly but it's never set as false as per the function logic.

My react version is "react": "^16.12.0"


@Sletheren 2020-01-14 13:17:53

Try to avoid mutating the object props directly e.g (obj[prop] = value) since its antI-pattern ... Use destructering as my example below:

On a different note, no need to write the code twice, you can reuse the same function, and pass an extra param to define if u wanna close/open:

handleModalClick = (name, visible) => {
    modal: {
      [name]: {...this.state.modal[name], visible }

@Sletheren 2020-01-14 13:57:54

can you share the code on JSFiddle? there must be something wrong elsewhere, since I tested this and it works

@Sletheren 2020-01-14 14:00:03

Also shouldnt it be show={this.state.modal.requestPopUp.visible} ?

@Omar Hussein 2020-01-14 14:02:41

I have modal destructured, render() { const { loading, modal } = this.state;

@Omar Hussein 2020-01-14 14:11:32 Can't get jsfiddle to work properly but this should have all the relevant code as an example

@Sletheren 2020-01-14 14:39:42

@OmarHussein It works here:

@Dave Newton 2020-01-14 15:15:12

@OmarHussein And here, using your original(-ish) code:

Related Questions

Sponsored Content

47 Answered Questions

[SOLVED] Sort array of objects by string property value

29 Answered Questions

[SOLVED] Iterate through object properties

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

22 Answered Questions

[SOLVED] Checking if a key exists in a JavaScript object?

49 Answered Questions

[SOLVED] How to check if an object is an array?

53 Answered Questions

[SOLVED] How do I test for an empty JavaScript object?

45 Answered Questions

[SOLVED] Detecting an undefined object property

63 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

41 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery

67 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

Sponsored Content