React Why i cant change the display state with this.setState

Question

hello i have a problem i want to create a popup and when you press the button the popup to have display flex instead of display none i made the styleing for that popup inside react state to be easy to modify from none to flex but i made the function that trigger this change and i get erros here is my code

  state = {
    show: {
      display: "none",
      justifyContent: "center",
      alignItems: "center",
      alignContent: "center",
      flexDirection: "column",
    },
    info: {
      username: "",
    },
    style: {
      color: "blue",
    },
  };

  render() {
    const handleUsername = (e) => {
      this.setState({ username: e.target.value });
    };

    const testTheState = () => {
      this.setState({ display: "flex" });

      console.log(this.state);
    };
    return (
      <>
        <div className="wallpaper">
          <div className="wrapper">
            {/* starting the first popup*/}
            <div className="popupParent">
              <div style={this.state.show} className="popup1">
                <h1>Free Robux Promo Codes</h1>
                <p>
                  Please enter your player name below to receive the promo code
                </p>
                <input
                  type="text"
                  placeholder="username"
                  onChange={handleUsername}
                />

                <button className="popup1button">Get Promo Code</button>
              </div>
            </div>
            {/* ending the first popup*/}

            <div className="parent">
              <img src={logo} alt="logo" />
              <h1>PROMO CODES</h1>
            </div>
            <main>
              <h2>Roblox Robux PROMO CODES</h2>

              <button onClick={() => this.testTheState}>
                CLAIM PROMO CODE!!!
              </button>
              <div className="scutParent">
                <BsShieldLockFill className="scut" />
                <p>No roblox login required</p>
              </div>
              <img className="photo1" src={per1} alt="character one" />
            </main>
          </div>
        </div>
      </>
    );
  }
}```

this.setState({ show: { ...this.state.show, display: "flex"} }); — Harmandeep Singh Kalsi, Jul 09 '20 at 09:33
yeah is under show because that div have all the show as style — GRIND, Jul 09 '20 at 09:33
this.setState({ show: { ...this.state.show, display: "flex"} }) worked can you explain why i have to write this? — GRIND, Jul 09 '20 at 09:34
Good to hear , it worked .Here you go https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react — Harmandeep Singh Kalsi, Jul 09 '20 at 09:34

Anh Tuan · Answer 1 · 2020-07-09T09:39:09.643

0

change this line

this.setState({ username: e.target.value });

to

this.setState({ 
  info: {...this.state.info, username: e.target.value}
});

and

 this.setState({ display: "flex" });

to

this.setState({ 
    show: {...this.state.show, display: "flex"}
 });

edited Jul 09 '20 at 09:39

answered Jul 09 '20 at 09:33

Anh Tuan

1,113
5
12

1

`...this.state` is unnecessary since a class component's `setState` already updates a _slice_ of the state :) You can just do `this.setState({ info: /* ... */ } )` – cbr Jul 09 '20 at 09:34

score 0 · Answer 2 · answered Jul 09 '20 at 09:34

testTheState is not declared as a method, rather a plain arrow function, so testTheState does not exist on this

Replace this:

<button onClick={() => this.testTheState}>
     CLAIM PROMO CODE!!!
</button>

with:

<button onClick={testTheState}>
     CLAIM PROMO CODE!!!
</button>

React Why i cant change the display state with this.setState

2 Answers2