const confirm = useConfirm(); always returns undefined about material-ui-confirm HOT 16 CLOSED

Did you try to use useConfirm(...) in child component? I can see it happening when you're wrapping component in and use useConfirm(...) in the same component.

from material-ui-confirm.

Ok I got it . I Wrapped Autocomplete in ConfirmProvider but it is too deep. Thanks. A great work with material-ui-confirm :)

from material-ui-confirm.

Did you wrap the whole app component tree in ConfirmProvider?

from material-ui-confirm.

Yes, I am using MuiThemeProvider and originally had ConfirmProvider as a child. However, I removed MuiThemeProvider ensuring ConfirmProvider was outermost and still the same issue.

from material-ui-confirm.

And I assume you are calling useConfirm in a functional component in that component tree? Seems weird, are there any significant differences between your usage and the demo?

from material-ui-confirm.

I am. I don't see anything very different from the samples.

from material-ui-confirm.

I guess one somewhat significant difference is my app is typescript.

from material-ui-confirm.

I see, I don't have any other ideas for why it wouldn't work without some kind of reproduction : <

from material-ui-confirm.

@KarolError404 thanks for that pointer—this is what I was doing to run into this. Perhaps this could be more clear in the docs?

from material-ui-confirm.

That's generally the case for the context provider + hooks pattern, common in many packages. I added a tiny clarification to the readme (043ccd4).

@gardengeek99 does this match your case?

from material-ui-confirm.

Yes that’s helpful for someone like me who is still new to React, thank you!

from material-ui-confirm.

Hi I ave the same issue: undefined confirm.

import { useConfirm, ConfirmProvider } from 'material-ui-confirm';

export default function TagTextForm({label, placeholder, onChange}) {
    const classes = useStyles();
    const confirm = useConfirm();
    console.log(confirm)   //undefined
    const handleChange = (ev, value, reason) => {
        console.log("confirm", confirm) //undefined
    }

    return (
        <div className={classes.root}>
            <ConfirmProvider>
                <Autocomplete
                    multiple
                    id="tags-text"
                    onChange={(ev, value, reason) =>
                    ....
                />
            </ConfirmProvider>
        </div>
    );
}

What I am doing wrong?

from material-ui-confirm.

@atompie the TagTextForm component needs to itself be wrapped in ConfirmProvider. Generally you want to keep ConfirmProvider at the very top level in the App component, similarly to router, theme provider, etc.

from material-ui-confirm.

Since there is no reproduction, I'm going to close this for now.

from material-ui-confirm.

I had this issue too:

• In my Next.js project it worked great
• In my Storybook wrapping my stories with the general decorator was not working with ConfirmProvider whereas all my other providers work great

My "workaround" is to set the wrapper component in another file then to use it inside preview.jsx. I can't explain why... hope this helps!

from material-ui-confirm.

Interesting, it does work for the stories in this repo:

from material-ui-confirm.