Closed lifeeric closed 3 years ago
I think it is similar to this https://mui.com/guides/migration-v4/#cannot-read-property-scrolltop-of-null.
The very first error message explains why this is happening:
index.js:1 Warning: Failed prop type: Invalid prop
children
supplied toForwardRef(Grow)
. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
Always read error messages top-to-bottom not bottom-to-top. The very first warning/error usually indicates the code may later crash.
So the solution is to litter previously working v4 code with divs or forwardrefs? This doesn't help with code smell.
Same here
Same here
Works for me: Pass children as real children instead of using "children" prop.
Wrong:
<Snack {...} children={children}/>
Correct:
<Snack {...}> {children} </Snack>
Same here
I discovered that I was feeding my own component inside the SnackBar. When I wrapped the content of SnackBar in a div, it was fixed. As the error message says "Expected an element that can hold a ref," SnackBar's child needs to be an element that can hold a ref, e.g. a div.
Before:
<SnackBar> <MyAlert/> </SnackBar>
After:
<SnackBar><div> <MyAlert/> </div> </SnackBar>
I discovered that I was feeding my own component inside the SnackBar. When I wrapped the content of SnackBar in a div, it was fixed. As the error message says "Expected an element that can hold a ref," SnackBar's child needs to be an element that can hold a ref, e.g. a div. Before:
<SnackBar> <MyAlert/> </SnackBar>
After:<SnackBar><div> <MyAlert/> </div> </SnackBar>
this is one worked for me
Hello. You can also add React.forwardRef to your children component. This works for me.
Bug is still here, wrapping child component in div worked for me. Sometimes I have to wrap it in div sometimes I don't, it's weird.
Edit: After some deeper digging, if you wrap your child component in a React Fragment(i.e. <> </>), this error will happen.
Hello all,
first of all, I appreciate all your efforts taken in this Wonderful open source project, which is a lifesaver!
Error I'm getting some unexpected errors when I create a separate re-usable component for the
SnackbarContent
and try to import it. if I direct start implementing it from the@mui/material
, it works but it doesn't work in the below example. I'm working on upgrading the material-ui-dropzone I need it for my project and this is where I'm getting this error.shows this errors:
Here is the codesanbox.
Thank You so much for your help!