Counter in Modal

Dave Bell

I am trying to create a modal that will have a + / - counter.

However, I think since the state is in base component, modal is not able to recognize it. Any idea how to solve it?

I tried passing it as a prop but no luck

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: (
      
      {"  #  "}{count}{"  #  "}
                            
      
    ),
    labels: { confirm: 'Confirm', cancel: 'Cancel' },
    onCancel: () => console.log('Cancel'),
    onConfirm: () => notifications.show({
      title: 'Input Submitted',
      message: 'Complete',
    }),
  });

  return (
    
      
        Sample
      


      
      
      
      
      
        
      
        
        
      
    
        
    
    
  )
}

I tried passing it as a prop but no luck

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago

Accepted answer

This is the more optimized version of my previous code:

import { useState, useCallback } from 'react';
import { useDisclosure } from '@chakra-ui/react';
import ConfirmModal from './ConfirmModal';

function ProgramCard() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(() => setCount(prevCount => prevCount + 1), []);
  const handleDecrement = useCallback(() => setCount(prevCount => prevCount - 1), []);

  const { isOpen, onOpen, onClose } = useDisclosure(false);

  const openModal = () => onOpen();

  return (
    
      
        Sample
        

        
        
      
       console.log('Cancel')}
        onConfirm={() => notifications.show({ title: 'Input Submitted', message: 'Complete' })}
      >
        
          
      
    
  );
}

export default ProgramCard;

And this is the code for ConfirmModal component:



import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Button } from '@chakra-ui/react';

function ConfirmModal({ isOpen, onClose, title, children, confirmLabel, cancelLabel, onCancel, onConfirm }) {
  return (
    
      
      
        {title}
        
        {children}
        
          
          
        
      
    
  );
}

export default ConfirmModal;

Tuhin Paul3y ago
Also you can improve the code by separating the modal into a separate component .i.e., instead of having the modal JSX code inside the openModal function, you can create a separate component for the modal and pass the necessary props to it. Also use useCallback hook for event handlers. In the current code, the handleIncrement and handleDecrement functions are recreated on every render. You can use the useCallback hook to memoize these functions and prevent unnecessary renders.Also instead of accessing the open and close functions using array syntax, you can use object destructuring to make the code more readable.
+1

Tuhin Paul3y ago

Check the code:

export default function ProgramCard() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };

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

  const ModalContent = ({ count, handleIncrement, handleDecrement }) => (
    
      
  );

  return (
    
      
        Sample
        

        
        
      
      
        
      
    
  );
}

Tuhin Paul3y ago
Hello,

You can pass the count state and its setter function as props to the modal component, so that the modal can access and update the state.
+1