We Keep Coding

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

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

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
)

Component Not Rendering React - Using Older React Router Dom Version

Hey guys using an older version of react-router-dom because I had to for this input form github i forked. Used to using useNavigate but this version is useHistory. I want to go from my main. dashboard to a page called House.js which renders a component MakePost.js. Whenever i travel to House its just a blank white screen. No errors. Help
Here is my Dashboard.js
async function House(){
return(history.push('/House'))
}
return (
<><>
<h2 className="title" style={{ left: "20%", marginTop: -150, marginLeft: 30 }}>Lestinsky Auctions.</h2>
</><>
<Card style={{ width: '400px', height: '500px', alignItems: 'center' }}>
<Card.Body>
<h2 className="text-center mb-4">Profile</h2>
{error && <Alert variant="danger">{error}</Alert>}
<strong>Email:</strong> {currentUser.email}
<Link to="/update-profile" className="btn btn-primary w-100 mt-3">
Update Profile
</Link>
<div>
<Button onClick={House} className="btn btn-primary w-100 mt-3">Go To Auction House</Button>
</div>
</Card.Body>
</Card>
<div style={{ left: '100%' }} className="w-100 text-center mt-2 btn btn-secondary">
<Link className="w-100 text-center mt-2 btn btn-secondary" variant="link" onClick={handleLogout}>
Log Out
</Link>
</div>
</></>
)
Here is my MakePost.js
import React, { useState} from 'react'
import { storage } from '../firebase'
import { ref, uploadBytes } from 'firebase/firebase-storage-compat'
import { v4 } from 'uuid'
function Upload(){
const [imageUpload, setImageUpload] = useState(null)
const uploadImage = () => {
if(imageUpload == null) return;
const imageRef = ref(storage, `images/${imageUpload.name + v4 }`)
uploadBytes(imageRef, imageUpload).then(() => {
alert("Image Uploaded")
})
}
return(
<div>
<input type="file" onChange={(event) => {setImageUpload(event.target.files)}}>
<button onClick={uploadImage}></button>
</input>
</div>
)
}
export default Upload
and here is my House.js
import MakePost from './MakePost'
function House(){
return(
<MakePost></MakePost>
)
}
export default House

Dialog modal overlay closing target components using headless/react dialog?

I'm using Next js and implementing modal dialog using #headlessui/react package. I'm setting an overlay but it closes all components when clicked.
index.js
const [modal, setModal] = useState("");
const [openModal, setOpenModal] = useState(false)
return (
<div>
{openModal && <Modal vid={modal} onClose={setOpenModal}/>}
...{
<div onClick={()=> {setOpenModal(true), setModal(res.snippet.resourceId?.videoId)}}>
}
...
</div>
)
Modal.js
import { Dialog } from "#headlessui/react";
import { useRef } from "react";
import YouTube from 'react-youtube'
import { XIcon } from "#heroicons/react/outline";
export function Modal({ vid, onClose }) {
let overlayRef = useRef();
const opts ={
playerVars: {
autoplay: 1,
}
}
//onClick={(e)=> e.stopPropagation()}
return (
<Dialog
static
open={true}
onClose={onClose}
initialFocus={overlayRef}
className="fixed inset-0 z-10 flex items-center justify-center bg-bg-black bg-opacity-70 backdrop-blur-sm"
>
<Dialog.Overlay
ref={overlayRef}
className="fixed inset-0 bg-gray-800/60"
/>
<div className="flex flex-col items-end justify-center">
<button onClick={()=> onClose(false)} className=' pb-3'>
<XIcon className=" h-5 w-5 text-text-gray-color hover:accent-text-gray-color"/>
</button>
<YouTube videoId={vid} opts={opts} className=""/>
</Dialog>
);
}
export default Modal
So how can I fix the overlay to only close when clicked outside of the component?

React Modal not closing via OnClick

I've set an onClick method to close the React Modal but it's not changing state. I believe there may be an issue with the openModalTwo, setOpenModalTwo but I'm not sure sure.
Here is my code:
import { Avatar } from "#material-ui/core";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { selectUser } from "../features/userSlice";
import "../style/QuestionBox.css";
import Modal from "react-modal";
import PeopleAltOutlinedIcon from "#material-ui/icons/PeopleAltOutlined";
import { ExpandMore } from "#material-ui/icons";
import { Input } from "#material-ui/core";
import LinkIcon from "#material-ui/icons/Link";
import db from "../firebase";
import firebase from "firebase";
function QuestionBox() {
const user = useSelector(selectUser);
const [openModalTwo, setOpenModalTwo] = useState(false);
const [input, setInput] = useState("");
const [inputUrl, setInputUrl] = useState("");
const handleQuestion = (e) => {
e.preventDefault();
db.collection("questions").add({
question: input,
imageUrl: inputUrl,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
user: user,
});
setInput("");
setInputUrl("");
setOpenModalTwo(false);
};
return (
<div className="questionBox" onClick={() => setOpenModalTwo(true)}>
<div className="questionBox__info">
<Avatar src={user.photo} />
<h5>{user.displayName}</h5>
</div>
<div className="questionBox__question">
<p>Where do I start?</p>
</div>
<Modal
isOpen={openModalTwo}
onRequestClose={() => setOpenModalTwo(false)}
shouldCloseOnOverlayClick={false}
style={{
overlay: {
width: 700,
height: 600,
backgroundColor: "transparent",
boxShadow:
"box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);",
zIndex: "1000",
top: "50%",
left: "50%",
marginTop: "-300px",
marginLeft: "-350px",
},
}}
>
<div className="modal__title">
<h5>Add Question Here</h5>
<h5>Share Your Question</h5>
</div>
<div className="modal__info">
<Avatar Avatar className="avatar" src={user.photo} />
<p>
{user.displayName ? user.displayName : user.email} wants to know
</p>
<div className="modal__scope">
<PeopleAltOutlinedIcon />
<p>Public</p>
<ExpandMore />
</div>
</div>
<div className="modal__field">
<Input
required
value={input}
onChange={(e) => setInput(e.target.value)}
type="text"
placeholder="Ask where to start on your project with a specific 'How' or 'What' question."
/>
<div className="modal__fieldLink">
<LinkIcon />
<input
value={inputUrl}
onChange={(e) => setInputUrl(e.target.value)}
type="text"
placeholder="Add a link to help others understand what you want to build."
/>
</div>
<div className="modal__buttons">
<button
onClick={() => setOpenModalTwo({ openModalTwo: false })}
className="cancel"
>
Close
</button>
<button onClick={handleQuestion} type="submit" className="add">
Add Question
</button>
</div>
</div>
</Modal>
</div>
);
}
export default QuestionBox;

Don't know how react-modal exactly works but as you are setting setOpenModalTwo(true) on click on parent container of Modal, when you're trying to close the Modal (by a click I guess), you are also firing the onClick event of your parent div, and so re-open the Modal.
So either move your Modal outside of your div, or use event.preventDefault() on Modal requesting close

How to position Dialog to top in Material-UI

I am currently creating a popup dialog. However, my dialog is positioned popping up in the center.
How do I make the position at the very top of the page when I press the popup btn?
Here is my code
<div>
<div id="so_reg" className="buy_btn" onClick={this.onClickCashBuy.bind(this)}>
Pop up button
</div>
<Dialog className="dialog" modal={false} open={this.state.buy_cash_popup} onRequestClose={this.onClickBuyCashCancel} style={{color: 'green'}} >
<Test product={{price: this.state.buy_cash_type}} />
</Dialog>
</div>

You can override the style of scrollPaper in <Dialog />
Functional component
const useStyles = makeStyles({
scrollPaper: {
alignItems: 'baseline' // default center
}
});
const classes = useStyles();
Classical component
const styles = theme => createStyles({
scrollPaper: {
alignItems: 'baseline' // default center
}
});
const { classes } = props;
export default withStyles(styles)(YourComponent);
Usage
<Dialog classes={{scrollPaper: classes.scrollPaper }}>
Refer: document of Material-UI Dialog CSS API
The HTML structure of Dialog which we can see from dev tools
Choose the MuiDialog-scrollPaper from below
<div
class="MuiDialog-container MuiDialog-scrollPaper makeStyles-dialog-163"
role="none presentation"
tabindex="-1"
style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
>
<div
class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
role="dialog"
aria-labelledby="simple-dialog-title"
>
...
</div>
</div>
In your code
import { withStyles } from '#material-ui/styles';
const styles = theme => createStyles({ // change to this
scrollPaper: {
alignItems: 'baseline'
}
});
class Shop extends Component {
render(){
const { classes } = this.props; // add this
return(
<Dialog className="dialog" classes={{scrollPaper: classes.scrollPaper }} modal={false} open={this.state.buy_cash_popup} onRequestClose={this.onClickBuyCashCancel} style={{color: 'green'}} >
<Test product={{price: this.state.buy_cash_type}} />
</Dialog>
export default withStyles(styles)(Shop); // `styles` here rather than `class`