modal counter

Question

I'm trying to create a modal with a /-counter.

However, I think since the state is in the underlying component, the modal doesn't recognize it. Any idea how to fix it?

I tried passing it as a prop with no success

export default function ProgramCard() {

  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    console.log(1)
      setCount(prevCount => prevCount + 1);
    };
    const handleDecrement = () => {
      setCount(prevCount => prevCount - 1);
    };

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

  const openModal = () => modals.openConfirmModal({
    title: 'Input Data',
    children: (
      <div>
      <Button placeholder='-' onClick={handleDecrement}></Button>{"  #  "}{count}{"  #  "}
                            <Button placeholder='+' onClick={handleIncrement}></Button>
      </div>
    ),
    labels: { confirm: 'Confirm', cancel: 'Cancel' },
    onCancel: () => console.log('Cancel'),
    onConfirm: () => notifications.show({
      title: 'Input Submitted',
      message: 'Complete',
    }),
  });

  return (
    <Grid.Col span={2}>
      <Paper shadow="xs" radius="md" p="sm">
        <Text fw={700}>Sample</Text>
      <br></br>
      <Space h="xs" />
      <Button variant={'light'} radius="xl" size="xs" onClick={openModal}>
      Record
      </Button>
      
      </Paper>
    </Grid.Col>
    
  )
}

I tried passing it as a prop with no success

Answer 1

I think you just need to pass handleIncrement:

Due to the way closures work in javascript, no matter where you call handleIncrement, it will still reference setCount, which in turn references count Inside the

Modal

component you may have a button

Increase