#How to map a list of items that have Action Menu, with actions that open a modal?

12 messages · Page 1 of 1 (latest)

wise sluice
#

I have decided to try out Mantine UI library for a work project to see if it will speed up development and help keep consistency throughout the app. I need to be able to map out a list of uses with each user having a menu component, and in that menu have a list of action that will open a modal to then change info about that user. When i click on open modal in one of the menus it modal opens but closes instantly any reason why i could just be beaning really thick. Any help would be much apricated.

function App() {
  const arr = ["123","1234","12345","123456"]
  return (
    <MantineProvider
      theme={{
        colors: {
          'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
          'pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
        },
      }}
    >
      {arr.map((x) => {
        return (
          <Menu id={x}>
          <Menu.Target>
            <Button>Toggle {x}</Button>
          </Menu.Target>
          <Menu.Dropdown>
            <Menu.Label>Application</Menu.Label>
            <Menu.Item>
            <EditModal id={x}/>
            </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        )
      })}
    </MantineProvider>
  );
}

export default App

function EditModal ({id}) {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open modal</Button>
      <Modal id={id} opened={opened} onClose={close} title="Authentication">
        <InputLabel>lable</InputLabel>
        <Input type='text' aria-label='Hello'/>
        <InputLabel>lable</InputLabel>
      </Modal>
    </>
  )
}
forest quail
# wise sluice I have decided to try out Mantine UI library for a work project to see if it wil...

when using map, you must make sure you assign key otherwise the react code will not behave properly:

 {arr.map((x) => {
        return (
          <Menu key={x} id={x}>

you should alter how you handle modal state next. for example,

            <Button onClick={() => setActiveModal(x)}>Toggle {x}</Button>

      <Modal opened={activeModal !== null} onClose={() => setActiveModal(null)} title="Authentication">
        <InputLabel>lable</InputLabel>
        <Input type='text' aria-label='Hello'/>
        <InputLabel>lable</InputLabel>
      </Modal>
wise sluice
forest quail
# 
const [activeModal, setActiveModal] = useState<string | null>(null)
#

this way you can set the state to your individual active modal ID, like you've setup in your arr array

#

and then this handles the true/false for opened, and will reset it properly on close

      <Modal 
        opened={activeModal !== null} 
        onClose={() => setActiveModal(null)}
#

will also mean in the modal children you can look at the activeModal's value and then conditionally do different things with it, like fetch its content

wise sluice
#

ahh ok cool

forest quail
wise sluice
#

@forest quail thanks for that, is there a way to allow the children of menu item to be its own componet and manage the state form inside the component ?

forest quail
wise sluice
#

@forest quail ok thanks very much i apricate it