Develop Reference

Send props to another functional component on click

I just learned react and I am building a simple blog app in react and I am trying to send props on button click But the props is not showing in the another functional component.
I am using react-bootstrap for modal (which is second component). And I am using for edit the current blog when user click on edit button in first component.
App.js
function SecondModalComponent(props) {
return (
<>
<Modal show={props.show}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<input type="text" value={props.title} />
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.onHide}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
)
}
const response = [
{
title: "First Blog",
description: "First Blog"
},
{
title: "Second Blog",
description: "First Blog"
},
{
title: "Third Blog",
description: "First Blog"
}
]
function BlogFirstComponent() {
const [show, setShow] = useState(false);
const openEditModal = (title) => {
<SecondModalComponent
title={title}
/>
}
return (
<>
<SecondModalComponent
show={modalShow}
onHide={() => setShow(false)}
/>
{
response.map((data) =>
<div>
<b>Title</b> {data.title}
<b>Title</b> {data.description}
<span onClick={() => openEditModal(data.title)}>Edit</span>
</div>
)}
</>
)
}
I have tried many times but it is still no showing the prop title.
Any help would be much Appreciated.

this is not how react model works with UI component, component should be declarative, and not returned on a callback on click handler.
you can define your modal at the top level of your component
function BlogFirstComponent() {
const [secondModalOpen, setSecondModalOpen] = useState(false);
const [data, setData] = useState({ title: '', description: '' });
return (
<>
<SecondModalComponent
{...data}
show={secondModalOpen}
onHide={() => setSecondModalOpen(false)}
/>
...
{
response.map((data) =>
<div>
<b>Title</b> {data.title}
<b>Title</b> {data.description}
<span onClick={() => {
setData({...data});
setSecondModalOpen(true);
}>Edit</span>
</div>
)}
<>
);
}
Now, whenever someone clicks the button, the modal is opened, and the right props are passed to the component at that moment.

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
};

React (Nextjs): render table row to boostrap modal onclick

I have the following Nextjs page using React bootstrap modal and a MUI datatables component:
const Start = () => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const options = {
onTableInit: rowData,
onRowClick: rowData => Testing(rowData),
}
return (
<Layout>
<Modal show={show} onHide={handleClose}>
<Modal.Header>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
Modal content
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
<MUIDataTable
title={"Datatable with modal onRowClick"}
data={data}
columns={columns}
options={options}
responsive="scrollFullHeight"
/>
</Layout>
)
}
export default Start;
The bootsrap modal works fine and opens onRowClick, I am also able to console log the rowData in a function when clicking a certain row:
function Testing(rowData) {
console.log(rowData)
);
I would like to achieve passing this rowData to the bootstrap modal accordingly when clicked on certain row.
I know I should be using the mapping, since it's an JSON object
{rowData.map(item => {
return <li key={item}>{item}</li>
}
)}
But how to integrate this into my current system? I get the error on rowData is not a function.

Open popup on DataTable row click in ReactJS

I'm using reactjs-popup and react-data-table-component npm libraries and I want to open a pop-up window when a row is clicked.
This is my code:
onRowClicked = (rowData,e) => {
return (<Popup
trigger={/*e.target.value*/}
modal>
{
close => (
<div>
// some code
</div>
)
}
</Popup>)
}
render() {
return (
<DataTable
title={title}
columns={columns}
data={data}
highlightOnHover={true}
pointerOnHover={true}
onRowClicked={this.onRowClicked}
noDataComponent='No content'
/>
)
}
Is it possible to bind the trigger attribute of Popup to the clicked row?

One Naive way to do this would be by putting the table details in the pop trigger
for instance
render() {
let SongList = this.state.Songs.map(({Artist,Title, Album, Id}, index) => {
return (
<Popup modal trigger={<tr key={Id} >
<td>{index+1}</td>
<td>{Artist}</td>
<td>{Title}</td>
<td>{Album}</td>
</tr>}>
{close => <Content4 close={close} />}
</Popup>
);
});
return(
<>
{SongList}
</>
);
}
It works but it is not the most neat or optimal code

how to close 2 model in react?

i am working on reactJs. I tried to generate user's gallery when user click on its avatar.I am using react-grid-gallery package for this.I uses semantic ui react for desiging.My code is:
<Modal trigger={<Image
src={data.profile_photo}
alt={data.name}
size="massive"
avatar
/>}
style={ { height: "90%" } }>
<Modal.Content >
<Modal.Description>
<Gallery images={Images} enableImageSelection='false' isOpen={true} showLightboxThumbnails='true' rowHeight='120'/>
</Modal.Description>
</Modal.Content>
</Modal>
Here Images is array of images which i already generated.Its works well and it generate slider.My question is this when i close slider still modal open.Basically there are two modal one for gallery and another is semantic.I want when i close Gallery Modal it should close semantic modal as well.how can i do it?? i tried to do by setting modelopen state but it not worked.

You can use lightboxWillClose to toggle modal's open.
It would be something like this:
state = { modalOpen: false }
handleModalClose = () => this.setState({ modalOpen = false })
handleModalOpen = () => this.setState({ modalOpen = true })
<Modal
open = {this.state.modalOpen}
trigger={<Image
onClick = {this.handleModalOpen}
src={data.profile_photo}
alt={data.name}
size="massive"
avatar
/>}
style={ { height: "90%" } }>
<Modal.Content >
<Modal.Description>
<Gallery
images={Images}
enableImageSelection='false'
isOpen={true}
showLightboxThumbnails='true'
rowHeight='120'
lightboxWillClose={this.handleModalClose}
/>
</Modal.Description>
</Modal.Content>
</Modal>
I haven't tested it so you might have to tweak it a little bit. But you get the idea.