Why imported hook gives an error has already been declared

Question

In my react project, I import this:

import confirmDialog from '../../components/confirmDialog/ConfirmDialog';

when I add the bottom line:

const [confirmDialog, SetConfirmDialog] = useState ({isOpen: false, title: '', subTitle: ''});

I get the following error: Identifier 'confirmDialog' has already been declared.

also i used confirmDialog in MyComponet like this:

<ConfirmDialog
        ConfirmDialog={confirmDialog}
        SetConfirmDialog={SetConfirmDialog}
      />

Answer 1

you are re-declaring your imported component. you can fix this issue by editing the name of your variables

import ConfirmDialog from '../../components/confirmDialog/ConfirmDialog';
...

const [confirmDialogContent, SetConfirmDialogContent] = useState ({isOpen: false, title: '', subTitle: ''});

...

<ConfirmDialog
        ConfirmDialog={confirmDialogContent}
        SetConfirmDialog={SetConfirmDialogContent}
      />