score:5
i would suggest use another child component for render your list item. in your current example you only one anchorel
, which means wherever you click, always one menu open and take action of that, which is last one. if you have child component for menu item, each component will have there own state and work for that item only.
example
class main extends component {
render() {
let items = _.map(results, (item, index) => {
return (
<menuitemcomponent key={item.id} item={item} onclick={this.handleclick} ondelete={(item) => this.props.delete(item.id)} />
)
})
return (
<fragment>
<list>
{items}
</list>
</fragment>
)
}
}
class menuitemcomponent extends component {
state = {
anchorel: null,
};
handleclick = event => {
this.setstate({ anchorel: event.currenttarget });
};
handleclose = () => {
this.setstate({ anchorel: null });
};
render() {
const { item } = this.props;
const { anchorel } = this.state;
return (
<listitem
divider
>
<listitemsecondaryaction>
<iconbutton
aria-label="more"
aria-owns={anchorel ? 'long-menu' : null}
aria-haspopup="true"
onclick={this.handleclick.bind(this)}
>
<moreverticon />
</iconbutton>
<menu
id="long-menu"
anchorel={anchorel}
open={boolean(anchorel)}
onclose={this.handleclose.bind(this)}
paperprops={{
style: {
maxheight: 200,
width: 200,
},
}}
>
<menuitem>
<iconbutton onclick={() => this.props.ondelete(item)} >
delete entry<deleteicon />
</iconbutton>
</menuitem>
</menu>
</listitemsecondaryaction>
</listitem>
)
}
}
here's a working example https://codesandbox.io/s/nn555l48xm
Source: stackoverflow.com
Related Query
- Displaying multiple menus in a loop
- loop through multiple objects inside the first array from JSON data displaying two arrays with objects in React using FUNCTION COMPONENT
- How to assign which MenuItems open onClick when multiple Menus are present on the material-ui Appbar using React?
- React/redux, displaying multiple components, sharing same actions, but with different state
- Displaying text on multiple lines in `react-tooltip`
- When displaying multiple markers on a map, how to open just one info window, when clicking on a marker?
- Loop through array and render multiple instances of a child component with that data with React?
- Msal logout displaying multiple account
- React render multiple buttons in for loop from given integer
- Displaying Multiple API Responses in React
- ReactJS Modal opening multiple times when in a Loop
- Loop through array of multiple images to upload individually to AWS s3 ReactJS
- Send multiple axios requests in a for loop in series (One after the other)
- Mapping over Menu objects causing multiple menus to open due to state
- Multiple ajax calls in loop inside ajax success
- How to handle multiple components in a loop with React-Redux
- Trying to loop through multiple components in React
- Call multiple `setState` hooks from multiple successive async calls in a for loop
- Generate multiple refs in map loop
- Dynamically create arrays and push multiple elements into it in the content of a single loop
- Dynamically set useState for multiple sub menus
- Displaying responsive text in multiple columns and rows in ReactJS
- Fetching multiple items in React/Redux causing infinite loop and no jsx on screen?
- Displaying one of multiple components best practices
- Displaying Multiple Properties of a component in React
- Having trouble displaying values retrieved from multiple APIs to Ag-Grid rows (React)
- Axios Refresh Token Infinite Loop - Multiple Requests
- Multiple option form not displaying
- Creating a loop to insert multiple instances of the same React component
- How to setState in React only after multiple fetches inside a loop are resolved
More Query from same tag
- How to document javascript unit test files using jsdoc?
- Reading data of a DataContext object
- For loop in useEffect too many re-renders
- Javascript ES6 best practice, variable instantiation
- Next.js - Using more than one global style in a component
- Using fetch in a custom React hook - data is fetching twice
- Object Key Not rendering React Component using firebase database
- Reflect changes without refresh in React
- How to get the id of a post from a URL
- Passing function through useContext
- React - componentDidUpdate() is unable to find DOM objects rendered by the render() method
- Redux store takes lil bit time to update store which causes else block to execute and hence get redirected to unintended page
- React EmblaCarousel - Functions are not valid as a React child
- Manually create a react element Object with streaming
- Using Firebase with React in Firebase Hosting
- Child component not re-rendering even though parent state is updated using hooks
- Updating the state of an array after search reactjs
- How to select a single list element when using map in React to alter the state value
- How to use <Link /> component inside dangerouslySetInnerHTML
- How do I update one of the array fields?
- Connect function outside the state in React
- React-router 2.0: passing username from login to children
- Get row count of a string inside a div
- Can i implement search option for sidebar items in react?
- How to filter from Observable Map in React?
- Hot reload is not working with clean react project?
- How to map and filter JSON with Javascript
- TypeError: middleware is not a function Error | v3 Migration Guide on React Redux Firebase
- Accessing react context without using contextType or set a default context
- Cant access second child object of an object api response in react