How do I close the modal window in react when clicking on the Add product button?

Question

everyone. I can't write the code to close the modal window in React. I don't know how this can be done, I need that when clicking on the "Add" button, a modal window opens, the user enters the data, and clicking on the "Add product" button, the window closes immediately

Code:

import React from 'react';
import CatalogProducts from "./CatalogProducts";
import Info from "./Info";
import CreateProduct from "./CreateProduct";
import {Button} from 'react-bootstrap';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import '../css/popup.css'

const Main = () => {

    return (
        <div>
            <div className="d-flex justify-content-between" style={{ width: '33rem', margin: '10px' }}>
                <Popup contentStyle={{width: "unset", backgroundColor: "red", border: "none", background: "none"}}
                       trigger={<Button> Add </Button>} modal>
                    <CreateProduct/>
                </Popup>
                <input placeholder={'search'}/>
                <span>sort by</span>
                <input/>
            </div>
            <CatalogProducts></CatalogProducts>
            <Info></Info>
        </div>
    );

};

export default Main;


import React from 'react';
import {useDispatch} from "react-redux";
import {addProductAction} from "../action/productsAction";
import {ConfigProduct} from "../Utils/configProduct";
import '../css/popup.css'
import '../css/flex.css'
import {Button} from "react-bootstrap";

const CreateProduct = () => {

    const dispatch = useDispatch()
    const newProduct = new ConfigProduct()
    
    function addProd() {
        dispatch(addProductAction(newProduct))
    }
    
    return (
            <div className = "popup">
                <h2  style={{textAlign: "center", color: "red"}}>New product</h2>
                <input className="item" placeholder="id" onChange={e => newProduct.idProd = e.target.value}/>
                <input className="item" placeholder="info" onChange={e => newProduct.name = e.target.value}/>
                <input className="item" placeholder="price" onChange={e => newProduct.infoProd = e.target.value}/>
                <input className="item" placeholder="date" onChange={e => newProduct.price = e.target.value}/>
                <input className="item" placeholder="enter url" onChange={e => newProduct.date = e.target.value}/>
                <p>
                    <Button onClick={addProd}>Add product</Button>
                </p>
            </div>
    );

};

export default CreateProduct;

I tried setting a flag to change the component class. but it didn't work out for me

Answer 1

In your main.js

[open, setOpen] = useState(false)

const closeModal = () => setOpen(false)

return (
   <div>
     <div className="d-flex justify-content-between" style={{ width: '33rem', margin: '10px' }}>
       <Popup 
         contentStyle={
           {width: "unset", backgroundColor: "red", border: "none", background: "none"}
          }
          trigger={<Button> Add </Button>} 
          modal
       >
            <CreateProduct closeModal={closeModal}/>
       </Popup>
                    <input placeholder={'search'}/>
                    <span>sort by</span>
                    <input/>
                </div>
                <CatalogProducts></CatalogProducts>
                <Info></Info>
            </div>
    )

and inside your CreateProduct.js

const CreateProduct = ({ closeModal }) => {
// your code 

function addProd() {
   dispatch(addProductAction(newProduct))
   closeModal()
}

// rest of your code
)