React Custom Modal closing functionality not updating-CodePudding

Thanks for the help in advance. Currently, I am learning react as part of it I am creating a simple modal which shows at the click of a button and hides at the click of the close button on the modal. While clicking it I want to close the modal and show the button. The modal is showing on the button click but not getting closed while clicking the close. I have usestate to update the state but it is not working properly. Can anyone help me to resolve this.

App.js

import React, { useState } from "react";
import Button from "./UI/Button";
import Modal from "./UI/Modal";
const App = () => {
  const [buttonActive, setbuttonActive] = useState(true);
  const [modActive, setModActive] = useState(false);
  console.log(`button active value is ${buttonActive}`);
  console.log(`modal active value is ${modActive}`);

  const btnState = (data) => {
    console.log(`button active state is ${data}`);
    setbuttonActive(data);
  };
  const modalState = (modal_data) => {
    console.log(`modal active state is ${modal_data}`);
    setModActive(modal_data);
  };
  if (!buttonActive) {
    return (
      <div className="App">
        <Modal modalStateVal={modalState} />
      </div>
    );
  } else if (buttonActive) {
    return (
      <div className="App">
        <Button btnStateVal={btnState} />
      </div>
    );
  }
  if (modActive) {
    return (
      <div className="App">
        <Button btnStateVal={btnState} />
      </div>
    );
  } else if (!modActive) {
    return (
      <div className="App">
        <Modal modalStateVal={modalState} />
      </div>
    );
  }
};

export default App;

Button.js

 import React, { useState } from "react";
import btns from "./Button.module.css";
const Button = (props) => {
  const [btnActive, setBtnActive] = useState(false);
  const btnHandler = () => {
    setBtnActive(false);
    props.btnStateVal(btnActive);
    // return;
  };
  return (
    <button className={btns.button} type="button" onClick={btnHandler}>
      Click to open modal
    </button>
  );
};

export default Button;

Modal.js

import React, { Fragment, useState } from "react";
import modal from "./Modal.module.css";
import btns from "./Button.module.css";

const Modal = (props) => {
  const [modalActive, setModalActive] = useState(false);
  const closeBtnHandler = () => {
    setModalActive(false);
    props.modalStateVal(modalActive);
  };
  return (
    <Fragment>
      <div className={modal.backdrop}></div>
      <div className={modal.modal}>
        <header className={modal.header}>
          <h2>Modal Heading</h2>
        </header>
        <div className={modal.content}>
          <p>Modal body..</p>
        </div>
        <footer className={modal.actions}>
          <button type="button" className={btns.button} onClick={closeBtnHandler}>
            Close
          </button>
        </footer>
      </div>
    </Fragment>
  );
};

export default Modal;

CodePudding user response：

First of all, your code is much more complicated than it should be.

I simplified your whole app to make it easier for you to understand what you're really trying to do and how to do it.

import { useState } from 'react';

function App() {
  const [modalActive, setModalActive] = useState(false);
  return (
    <div className='App'>
      <button onClick={() => setModalActive(() => setModalActive(true))}>
        Open Modal
      </button>
      {modalActive && (
        <div className='Modal'>
          <button onClick={() => setModalActive(false)}>Close Modal</button>
        </div>
      )}
    </div>
  );
}

export default App;