score:0
so what i understand is u rendered each item in the state.elements and each <singleelement/>
component has a button and upon clicking on this button u wanna open the modal will display the value of single element
looks like each button is gonna use openmodal method. with this method we have to do 2 things. first change the this.state.modalisopen
value and pass the dynamic value on to the modal body. for this, first i ll show u a javascript magic. in javascript
!!undefined=false
!!anystring=true // pretty clear i believe
so first step, this.state.modalisopen:undefined
should be set like so. magic will start in third step.
second step you have to pass this value to the singlemodal component. in your parent component u also render a component that includes modal so i will name it **singlemodal**.
<singlemodal
modalisopen={this.state.modalisopen} //i just show the related prop here.
/>
third step in the modal component i believe it is stateless function component.
initially in the state modalisopen value was undefined.
so with javascript magic !!props.modalisopen
value is set to false. so no modal shows up.
fourth step, openmodal method activates the modal.
openmodal = (beerid) => {
this.setstate({modalisopen:this.state.elements[beerid] , chosenbeer:this.state.beers[beerid]});
}
here is the thing since i dont know layout about your app, i assumed that beerid is same as the key id value inside each <singleelement key={} />
. so i pulled the single element inside the this.state.elements
.
here is the second part of the magic. i set the modalisopen to this.state.elements[beerid]
. remember that this value is what we set for the isopen prop inside the modal component.
<modal
isopen={!!props.modalisopen}
/>
this time props.modalisopen=this.state.elements[beerid]
which is a string. so !!props.modalisopen
will be true and your modal will open.
last step, now inside the modal
{props.modalisopen && <p>{props.modalisopen}</p>}
score:1
you can do this two says. when a menu item is clicked created a function that stores the menu item to the state, then the modal can call directly from the state.
what i would do, is have a function attached to the listitem that captures the selected item and sends it through to a custom reusable modal component...
onclick={() => this.handleclick(item)}
handleclick(item) {
//you would need to create a reusable modal component and import it.
return (
<reusablemodalcomponent item={item}
)
}
then in your reusablemodalcomponent you can access everything from the list via this.props.item.src...etc
update for your example to make your code work as is...
this.state.elements.map((item, index) => {
return(<singleelement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} ondelete={id => this.ondelete(index)} openmodal={elementid => this.openmodal(index)} onclick={() => this.setstate({itemtoshow: item, modalisopen: !this.state.modalisopen}) />)
})
then, reference this.state.itemtoshow.etc inside your modal
Source: stackoverflow.com
Related Query
- Render Content Dynamically from an array map function in React Native
- Dynamically changing number of columns in React Native Flat List
- React Modal Does Not Close In Between Loading Content
- Content of React modal dialogs is not available to Enzyme tests using mount()
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- How do I dynamically change the content of a React Bootstrap modal?
- React Modal close if is clicked outside of content
- React Bootstrap Tab not changing content
- Hide content dynamically with React
- Prevent Modal Rerendering when only Modal Content Change: React Hooks useReducer
- Changing fetch request url dynamically when state updates in React
- React JSX Dynamically changing the state of a component. Best practice and why
- React opening react-bootstrap modal in content component from sidebar
- Add React elements dynamically depending on the content height
- A way to reset the content when the modal is closed in React
- Dynamic content with React js Modal
- React js - Dynamically Change the style Maxheight of element based on dynamic content
- document.getElementById is not changing the styles dynamically in my React component
- Dynamically changing the 'fill' level of an SVG in react
- React PerfectScrollBar scroll at bottom of container for dynamically generated content
- How to dynamically update values in Shopping Cart when one item value is changing in React JS using state in map function?
- Dynamically changing react-modal content
- React state changing unexpectedly when trying to dynamically change state
- Link routes in react changes the link but nothing is changing in the content of the page
- React TinyMCE editor set bbcode content dynamically
- React Bootstrap Modal appears under the rest of the content instead of overlay.
- Button shifts location when changing content of react component
- Dynamically changing React component tag
- Changing the URL dynamically in Gatsby / React
- React dynamically create buttons that open the corresponding modal
More Query from same tag
- Set the localstorage.getItem() value on the stopwatch in React
- Is it possible to merge created stores in redux?
- How to run onSubmit={} only after the props have updated?
- In the latest mui LoadingButton is missing?
- Component does not render, but react does not show errors
- Add and remove items by index when pushed into state array with other array data React
- Extract frames from specific times from video
- MUI: Overriding easing/timing function in Slide Transition component
- How to set up ssl ceritficate for react.cordova, ionic and android?
- Ruby on Rails "support for the experimental syntax 'jsx' isn't currently enabled"
- how to convert the below stream to pdf file in react or javascript
- Not able to use useState in the default app function
- Lodash to find if object property exists in array
- How to implement a style where the picture inside the Card Media will somehow pop out or like it will hover above?
- Focus on next Input field on Enter in Redux Form
- Pointers on how to use leaflet's polyline in reactjs & react-leaflet
- How to pass input value on form submit in react
- Material-UI Select shows the wrong value: More explanation in the post
- show Save-Button when items added
- Cannot read property 'getAttribute' of undefined - reactjs
- Why won't my picture appear in ReactJS?
- React JS Reusable Collapse/Toggle Function
- If featured image is not set gatsby gives error
- How to send form data as json in React?
- redux-persist got error: Store does not have a valid reducer
- React filter on item in array inside array
- Linter or User error: Setting state from useEffect causing loop
- Update nested object in array in ReactJs
- Get value using forwardref onclick on checkbox in react hook form DataTable
- Why React.Component only rendering once even when I have multiple target elements