I want my snackbar to open if the mutation is not successful. In this case, handleOpen() is called.When I hit the button, the mutation takes place and my page crashes. I get an error that
TypeError: undefined is not an object (evaluating 'children.props.style')
When I remove the setStatus from my handleOpen function, the page doesn't crash. Oops is printed.
For my Snackbar, I am using open={status}
Here's the full code:
export default function RemoveUserPage() {
const [state, setState] = useState({
email: '',
});
const [status, setStatus] = useState(false);
// onCompleted= {(e: any) => setStatus(true)}
function submitForm(RemoveUserMutation: any) {
const { email} = state;
if(email){
RemoveUserMutation({
variables: {
email: email,
},
}).then(({ data }: any) => {
console.log('info: ', data.deleteUser);
})
.catch(console.log)
}
}
//In my case, the mutation is unsucessful so handleOpen()is called
const handleOpen = () => {console.log('Oops');setStatus(true)}
return (
<React.Fragment>
<Mutation mutation={RemoveUserMutation}
onError={(err: any) => {
handleOpen()
}}
>
{(RemoveUserMutation: any) => (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<Formik
initialValues={{ email: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}
>
{props => {
const {
values: { email },
errors,
touched,
handleChange,
isValid,
setFieldTouched
} = props;
const change = (name: string, e: any) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
setState( prevState => ({ ...prevState, [name]: e.target.value }));
};
return (
<div className='main-content'>
<form style={{ width: '100%' }}
onSubmit={e => {e.preventDefault();
submitForm(RemoveUserMutation)}}>
<div>
<TextField
variant="outlined"
margin="normal"
id="email"
name="email"
helperText={touched.email ? errors.email : ""}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, "email")}
/>
<br></br>
<Button
type="submit"
disabled={!isValid || !email}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}
>
Remove User</Button>
</div>
</form>
</div>
)
}}
</Formik>
</div>
)}
</Mutation>
<Snackbar
open={status}>
</Snackbar>
</React.Fragment>
);
}