PART 12 - To-Do App - ['Symfony 5', 'React', Material UI'] - Material UI Snackbar

In this video series I'll be going over how to make a basic to-do app using React, Symfony and Material UI.
In this episode we will look at Material UI Snackbars which basically is a notification pop-up. We can decide the location it renders as well as the color it will display in with an easy switch with react. There is also a Theme methods for this but because this app is so small there is no reason to and we'll just do it inline with conditional render boolean. Color will change based on the message level object we get back from symfony in the back-end through PHP.
If you want to follow along with this series from start to finish I recommend using the playlist for this series: • To-Do App - ['Symfony ...
Snackbar Docs:
material-ui.co...
Plugins▼
plugins.jetbra...
Video Links▼
composer: getcomposer.or...
Symfony: symfony.com/do...
PHP: www.php.net/do...
GIT:git-scm.com/do...
SQL Workbench: dev.mysql.com/...
JETBRAINS Student Program: www.jetbrains....
Yarn: yarnpkg.com/en...
My Links▼
My website: sandercokart.com
Instagram: / sandercokart
@SanderCokart
Twitter: / sandercokart
@SanderCokart
Join the Discord Community?
/ discord
AND tell me me what you think of the video PERSONALLY!
(If you want)
FAQ▼
1drv.ms/b/s!Al...

[@LeandroLuccerini]

On 5:00 about autoHideDuration, it simply calls the "onClose" function. So if you want the Snackbar to disappear, you have to add a function
const onClose = () => {
context.setMessage('');
}
and pass it to the "onClose" props of the Snackbar

[@SanderCokart]

Yeah figured that out. But I'm almost inclined to stop the synfony and continue on laravel cuz damn it's much better

[@camilogonzalez9137]

don´t know why cannot implement Snackbar
this is my error:
Uncaught TypeError: prop_types__WEBPACK_IMPORTED_MODULE_4___default(...).shape is not a function
at Object../node_modules/@material-ui/core/esm/Snackbar/Snackbar.js

[@SanderCokart]

Shape has been written wrong hehe. Wrong syntax for prop types

[@SanderCokart]

@@camilogonzalez9137 weird. Looks alright

[@SanderCokart]

You don't have proptypes npm installed?

[@camilogonzalez9137]

@@SanderCokart many thanks i was struggling a lot with this. Nice videos Sander

[@yassinerihani2760]

Snackbar.js:254 Uncaught TypeError: prop_types__WEBPACK_IMPORTED_MODULE_12___default(...).shape is not a function !!

[@SanderCokart]

MyComponent.propTypes = {
style: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
}
You must have written the proptypes syntax wrong

[@yassinerihani2760]

@@SanderCokart thanks

[@hagsa]

931 followers

[@SanderCokart]

Slowly progressing

[@hagsa]

@@SanderCokart be proud anyway hubs