React Почему я не могу изменить состояние отображения с помощью this.setState

Question

привет, у меня проблема, я хочу создать всплывающее окно, и когда вы нажимаете кнопку, всплывающее окно, чтобы отображать гибкость вместо отображения нет, я сделал стиль для этого всплывающего окна внутри состояния реакции, чтобы его было легко изменить с none на flex, но Я сделал функцию, которая запускает это изменение, и у меня появляются ошибки, вот мой код

  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>
      </>
    );
  }
}```

Answer 1

testTheState не объявлен как метод, а как обычная стрелочная функция, поэтому testTheState не существует на this

Замените это:

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

на:

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

Answer 2

измените эту строку

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

на

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

и

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

на

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