Develop Reference

How to show modal based on what was clicked on the card [duplicate]

This question already has an answer here:
How do I use React Modal with a map function?
(1 answer)
Closed 6 months ago.
How can I show the modal only based on card was clicked?
I have this dynamic card. Once I clicked on a specific card, how can it show the modal with a title of the data's id? As of now, once I click on a card, it will only show the last id.
Main app
const [isOpen, setisOpen] = useState(false);
const handleOpen = (id) => {
console.log(id);
setOpen(true)
};
const handleClose = () => {
setisOpen(false);
};
....
{data.map((i) => (
<Grid
key={data.indexOf(i)}
>
<CardonClick={(e) => handleOpen(i.id)}>
<CardHeader title={i.title} />
</Card>
<Modal isOpen={isOpen} handleClose={handleClose} title={i.id}/> <-- display of the id here
</Grid>
))}
Modal reusable component
import {
Dialog,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Button,
DialogActions,
} from "#mui/material";
const Modal = ({ title, subtitle, children, isOpen, handleClose }) => {
return (
<Dialog open={isOpen} onClose={handleClose}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>{subtitle}</DialogContentText>
<Divider />
{children}
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="error">
No
</Button>
</DialogActions>
</Dialog>
);
};
export default Modal;

You can use useState hook and store the relevant data (id in your case) in handleOpen function. Then you can use that data in your modal. example:
const [isOpen, setisOpen] = useState(false);
const [currentModalId,setCurrentModalId]=useState("");
const handleOpen = (id) => {
console.log(id);
setCurrentModalId(id);
setOpen(true)
};
const handleClose = () => {
setisOpen(false);
};
And then use it:
...<Modal> <div> {id} </Modal>

How to make rowEvents in react-bootstrap-table-next be called on a button only instead of a row

I am working on a react-bootstrap-table, I set it up in a way when I click on the icon button, a modal pops up displaying the information of the row data. But when I click on another column of a row, the modal also pops up displaying data.
I want a situation whereby the modal only pops up when you click on the icon, instead of the row. This is making the cellEdit function not to be called.
const [modalInfo, setModalInfo] = useState([])
const [show, setShow] = useState(false);
const [showModal, setShowModal] = useState(null);
const rowEvents = {onClick: (e, row) => {
setModalInfo(row);
toggleTrueFalse();
},
};
const toggleTrueFalse = () => setShowModal(handleShow);
Cell Edit
const cellEdit = cellEditFactory({
mode: 'click',
blurToSave: true,})
Modal
const ModalContent = () => {
return (
<>
<Modal isOpen show={show}>
<ModalHeader>Terminal Info</ModalHeader>
<ModalBody>
<ul>
<h6 style={{ fontFamily: 'Georgia' }}>id : {modalInfo.id}</h6>
</ul>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={handleClose}>
<FontAwesomeIcon icon="ban" />
Close
</Button>
</ModalFooter>
</Modal>
</>
);
};
jsx
return (
<>
<div>
<h2 style={{ color: "red", fontFamily: "Georgia" }}>Terminals</h2>
</div>
<BootstrapTable
keyField="id"
data={data}
columns={columns}
cellEdit={cellEdit}
rowEvents={rowEvents}
/>
{show ? <ModalContent /> : null}
</>
);
If I can be able to achieve this, then cellEdit will work fine.

How to stop useEffect from loading my modal multiple times?

I have a function based React view which has a modal that loads based on the presence of an item in the local storage:
function myView() {
...
function HelpModal() {
const [show, setShow] = useState(false);
useEffect(()=>{
let pop_status = localStorage.getItem('this-page-modal');
if(!pop_status){
setShow(true);
}
},[])
if(!setShow) return null;
const handleClose = () => {
localStorage.setItem('this-page-modal', '1');
setShow(false);
};
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Button text
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Body>
<p>Hey! This is a modal.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
);
}
return (
<div>
<Container style={{marginTop: "1em"}}>
<Row>
<Col><h1>My View</h1></Col>
<Col><span style={{float: "right"}}> <HelpModal /></span></Col>
</Row>
</Container>
</div>
);
}
The problem: When I load the page, the modal flickers and loads 2 or 3 times.
How do I make it load only once? Any suggestions will be appreciated.

For the general case, you can use useLayoutEffect to make the update occur quicker, near instantaneously, instead of a bit after a repaint with useEffect.
Also, the if(!setShow) return null; line is completely superfluous because the useState setter function will always be a function, which is truthy.
useLayoutEffect(() => {
const pop_status = localStorage.getItem('this-page-modal');
if (!pop_status) {
setShow(true);
}
}, []);
But since the function inside the effect is completely synchronous, it'd make more sense to use the storage value as the initial value for the show state, instead of calling the state setter; you an remove the effect entirely.
const [show, setShow] = useState(!localStorage.getItem('this-page-modal'));
const handleClose = () => {
localStorage.setItem('this-page-modal', '1');
setShow(false);
};
const handleShow = () => setShow(true);
return (
// ...

Your setup could be causing re-renders based upon code not represented here so it's difficult to diagnose the exact issue. One thing to try might be to put a console.log statement in various function scopes to see how many times it's being re-rendered on load. Aside from that, (and concurring with previous answer) I think you might be able to simplify your code down a bit and get the same result by having the conditional render be straight from localStorage. Maybe something like:
function HelpModal() {
const [show, setShow] = useState(localStorage.getItem("this-page-modal"));
const handleClose = () => {
setShow(false);
localStorage.setItem("this-page-modal", false);
};
const handleShow = () => {
setShow(true);
localStorage.setItem("this-page-modal", true);
};
return (
<>
<Button variant="primary" onClick={handleShow}>
Button text
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Body>
<p>Hey! This is a modal.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
);
}
function myView() {
return (
<>
<HelpModal />
</>
);
}

Rendering Modal Popup

My goal is to launch a modal pop-up during the event a button is clicked. I've been having issues making the Axios API call to the function that contains the modal. The process of the API call has been listed below:
First: This is the button where the Axios post request is made (addToCart) (works fine)
<button className="button is-primary" onClick={addToCart}>
ADD TO CART
</button>
Second: This is the Axios post request that makes a call to the modal pop-up (Example()) (works fine)
const addToCart = () => {
Axios.post(
//standard backend API call is made here
)
.then((res) => {
console.log("post called")
Example(); //I want to launch my modal when this state is reached
})
.catch((err) => {
if (err.response && err.response.status === 401) {
setIsLoggedIn(false);
}
});
Third: This is the modal that I'd like to popup but have been having issues rendering the function (Issue)
https://react-bootstrap.github.io/components/modal/
function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
render(<Example />);
I receive the following error:
Line 38:3: 'render' is not defined no-undef
How can I properly render my modal pop-up?

Instead of having a show state in your Example component, receive this data in a prop. In addition, you'll also want to pass some callbacks to the component to be able to react to certain events (e.g. clicking "Close" or "Save Changes").
I'd do the following:
const Example = ({ show, onClose, onSave }) => (
<Modal show={show} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
<Button variant="primary" onClick={onSave}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
)
This way you could always render the Example component in some parent component and show it conditionally, like so:
const SomeParentComponent = () => {
const [showExample, setShowExample] = useState(false)
const addToCart = () => {
Axios.post("http://example.com/api/add-to-cart")
.then((res) => {
console.log("post called")
setShowExample(true)
})
.catch((err) => {
if (err.response && err.response.status === 401) {
setIsLoggedIn(false);
}
})
}
return (
<>
<button className="button is-primary" onClick={addToCart}>
ADD TO CART
</button>
<Example
show={showExample}
onClose={() => setShowExample(false)}
onSave={() => setShowExample(false)}
/>
</>
)
}

Dispatch a Redux action from a modal in React

I'm a begginer in React and I'm trying to find a way to dispatch a redux action from a modal.
I have a list of products and a button 'add to bag' under each image. When we click on the button 'add to bag', I want a modal to appear that ask for a confirmation. The action need to be dispatched when the user click on the confirm button inside de modal window.
The action need to grab the item object.
All is working fine ...but I'm not able to pass the item into the action when I want to launch the action from the modal.
So, my problem is not the Redux side but the modal part ( I use React-bootstrap for the modal).
I have this error message : 'item' is not defined
I'm not sure I understand exactly why this does'nt work and I failed to find a solution. I tried so many things but it's just not working.
Is there a simple way to add/pass the item data into the modal easily ?
Help would be very appreciated ! :)
Thanks a lot !!!
Here are part of my files :
Product.js
import { Modal } from "react-bootstrap";
function Products(props) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<div>
<CardGroup>
{_.map(props.data, (item) => (
<Col>
...Some code here
<div>
<div>
{item.name.map((item) => (
<ul key={item}>{item}</ul>
))}
</div>
<div>
<button onClick={() => {handleShow()}}>
Add to bag
</button>
</div>
</div>
</Col>
))}
</CardGroup>
<Modal show={show} onHide={handleClose}>
<Modal.Body>Please confirm you want to add this product</Modal.Body>
<Modal.Footer>
<button
onClick={props.addProductToBasket(item)}
>
Confirm
</button>
<button onClick={handleClose}>Cancel</button>
</Modal.Footer>
</Modal>
</div>
);
}
const mapStateToProps = (state) => {
return { code here ...};
};
const mapDispatchToProps = (dispatch) => {
return {
addProductToBasket: (id) => dispatch(addProductToBasket(id)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Products);
Here is the part of my Product.js file im my Store/actions folder
export const addProductToBasket = (id) => {
return {
type: ADD_PRODUCTD_TO_BASKET,
payload: id,
};
};

Since you only show the modal if an item was clicked, store the item or null instead of Boolean in the state, and open and close the modal accordingly:
function Products(props) {
const [selectedItem, setShowItem] = useState(null); // item for open model or null for closed
const handleClose = () => setShowItem(null);
const handleShow = item => setShowItem(item);
return (
<div>
<CardGroup>
{_.map(props.data, (item) => (
<Col>
...Some code here
<div>
<div>
{item.name.map((item) => (
<ul key={item}>{item}</ul>
))}
</div>
<div>
<button onClick={() => handleShow(item)}>
Add to bag
</button>
</div>
</div>
</Col>
))}
</CardGroup>
<Modal show={selectedItem !== null} onHide={handleClose}>
<Modal.Body>Please confirm you want to add this product</Modal.Body>
<Modal.Footer>
<button
onClick={() => props.addProductToBasket(selectedItem)}
>
Confirm
</button>
<button onClick={handleClose}>Cancel</button>
</Modal.Footer>
</Modal>
</div>
);
}
Not related, but it will make your life easier - use the object form of mapDispatchToProps that will save you the need to wrap with dispatch manually:
const mapDispatchToProps = {
addProductToBasket
};