Comments (5)
So it seems that @mzabriskie is suggesting making the parent component of your grid items the owner of the modal and having clicks on the grid items invoke a callback to the parent to render the appropriate content in the modal. This would work, but I find it less than ideal simply because it introduces a callback dependency that could be avoided.
It would be nice to be able to configure whether the ReactModalPortal
element is inserted into the DOM if the modal is not the open state, which would effectively solve this problem (though I can imagine possible performance considerations where you'd want the option). You can accomplish the same by conditionally rendering the modal, something like this:
render() {
return (<div>
{'some component content'}
{this.state.modalIsOpen ?
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}>
{'some modal content'}
</Modal>
: null}
</div>);
}
from react-modal.
This 'issue' is old but one year later I have to thanks @mzabriskie for sharing that repository. Because of it I was able to implement a similar dynamic modal to my project. Your code was really clear and I was able to understand what you were doing. Had some troubleshooting in my project but it was because of my javascript limitations but it was like looking at a tutorial without an order or explanation of things.
from react-modal.
I would dynamically generate the content of a single modal based on the link that was clicked. As an example, you can see what I did for the React Rally schedule on our website https://github.com/react-rally/www/blob/gh-pages/2015/app/screens/Schedule/index.js#L152-L180
from react-modal.
@pumpikano - great solution. It works 😄 Thank you
from react-modal.
@claydiffrient How would do this in my case ?
This is my Grid.js
export default class Grid extends React.Component {
showmodal(){
// do whatever to show modal
}
render() {
let data = [
{id:1, name: 'john', star: 4},
{id:2, name: 'peter', star: 1},
{id:3, name: 'sasa', star: 3}
]
return (
<div>
{
data.map( function(i, index){
return (
<div className="item" onclick={this.showmodal}>
<span>{i.id}</span>
<span>{i.name}</span>
<span>{i.star}</span>
</div>
)
})
}
<Modal
overlayClassName="detail-modal-overlay"
className="detail-modal"
isOpen={this.state.detailModal}
onRequestClose={this.closeDetailModal.bind(this)}>
</Modal>
</div>
)
}
}
What I want is, when an item is clicked, the modal will display the content as below:
<div>
<span>{...clicked id..}</span>
<span>{...name of clicked id...}</span>
<span>{...star of clicked id...}</span>
</div>
from react-modal.
Related Issues (20)
- Replace focus trap with `inert` HOT 1
- Focus on the input element is lost when trying to scroll modal content by dragging scrollbar
- Focus trap incorrectly finds tabbable elements HOT 11
- Modal doesn't close on the first click on the overlay after click on elements containing event.stopPropagation() inside modal HOT 11
- Add support for React & Node 18 (as easy as adding startTransition() on each setState) HOT 18
- When I try to apply css variables from css modules in React, nothing is passed HOT 9
- Npm start related issue
- Why convert position property to inset? HOT 2
- Analysis: 90% of dependency updates in this repository can be merged.
- Should use event.key not event.code
- How can i make the modal overlay non blocking? HOT 2
- Resize error when moving tab around HOT 2
- Display blurry when elements with position attributes and have scrollbars. HOT 3
- Close the modal window on the first click when using stopPropagation() HOT 3
- Moving to a "modern" build system (hardcore level) HOT 6
- Refactor react-modal to use TypeScript HOT 1
- Replace Karma (now deprecated) with a new test runner HOT 6
- Runtime error when tabbing elements where shadowDom is a document fragment rather than an element
- Consider dropping support for React versions <= v16 HOT 3
- Avoid Scroll position being kept HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-modal.