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"

1 comments

@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) => {
 this.setState({
    modal: {
      ...this.state.modal,
      [name]: {...this.state.modal[name], visible }
    }
 })
}

@Omar Hussein 2020-01-14 13:53:27

I just switched to this code, exact same behavior.

@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

jsfiddle.net/8xy1L6hb/2 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: jsfiddle.net/Sletheren/wcx2qayv/5

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

@OmarHussein And here, using your original(-ish) code: jsfiddle.net/davelnewton/9dj2cgpw/9

Related Questions

Sponsored Content

45 Answered Questions

[SOLVED] Sort array of objects by string property value

42 Answered Questions

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

49 Answered Questions

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

63 Answered Questions

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

68 Answered Questions

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

48 Answered Questions

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

20 Answered Questions

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

  • 2009-07-08 13:21:32
  • Adam Ernst
  • 1866190 View
  • 2818 Score
  • 20 Answer
  • Tags:   javascript object

41 Answered Questions

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

42 Answered Questions

[SOLVED] Detecting an undefined object property

28 Answered Questions

[SOLVED] Iterate through object properties

Sponsored Content