Modal keeps triggering when I press a key

Question

I am having a problem with the project I'm working on from a React course.

When I click on the right button and close it, every time I type again Modal tends to open automatically. It seems that after close the alert state between true or false but props keeps true as value.

Parent

import "./page-home.css";
import logo from "./download.svg";
import ReactDom from "react-dom";
import Modal from "./components/modal.js";

class PageHome extends React.Component {
  state = {
    busqueda: "",
    modal: false,
  };
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.history.push("/busqueda?" + this.state.busqueda);
  };

  handleClick = (e) => {
    console.log(this.props.estado);
    e.preventDefault(e);
    this.setState({
      modal: true,
    });
  };



  handleChange = (e) => {
    this.setState({
      busqueda: e.target.value,
    });
  };

  render() {
    return (
      <div className="container">
        <div className="row centrado">
          <div className="col-md-6 centrar">
            <img src={logo} alt="" id="logo" />
            <form
              className="form-inline"
              onSubmit={this.handleSubmit}
              name="Resultado de la prueba: "
            >
              <div className="busqueda">
                <input
                  name="busqueda"
                  value={this.state.busqueda}
                  type="text"
                  id="buscar"
                  placeholder="Buscar una banda"
                  onChange={this.handleChange}
                />
              </div>
              <div className="actions">
                <button className="btng">Artistas Similares</button>
                <button className="btng" onClick={this.handleClick}>
                  Acerca del sitio
                </button>
              </div>
            </form>
          </div>
        </div>
        {ReactDom.createPortal(
          <Modal estado={this.state.modal} key={this.state.modal}>
            <p>modal test</p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
              quae assumenda tempora eius autem corporis quas rerum ad ipsum
              laborum illum suscipit, harum iusto maiores sapiente, eum odio
              laboriosam dolorum?
            </p>
          </Modal>,
          document.getElementById("teleport")
        )}
      </div>
    );
  }
}

export default PageHome;

and this is the modal's code

import "./modal.css";
class Modal extends React.Component {
  state = {
    estado: this.props.estado,
  };

  componentWillReceiveProps(e) {
    this.setState({
      estado: e.estado,
    });
  }
  handleClick = (e) => {
    e.preventDefault();
    this.setState({
      estado: false,
    });
  };

  render() {
    if (this.state.estado !== true) return null;

    return (
      <React.Fragment>
        <div className="modale">
          <div className="cardModal">
            <button className="salir" onClick={this.handleClick}>
              X
            </button>
            {this.props.children}
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Modal;

Could be "this.props.estado" in the state from Modal the problem? Im new here so let me know If I can give you more information.

Answer 1

Manage to solve it. I just moved the closing function from the child to the parent and and save the value in a new prop that will receive the child component.

      <Modal estado={this.state.modal} hide={this.handleHide}>