Material-ui: [Grid] Failed prop type: The property `xs` of `Grid` must be used on `item`

[sgermain06]

• [X] This is not a v0.x issue.
• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Shouldn't throw a warning.

Current Behavior 😯

Throws a warning when page is reloaded, complaining about xs being set on a non-item grid tag, when the line throwing the warning doesn't have it.

Steps to Reproduce 🕹

Link:

1. Load the page at https://codesandbox.io/s/010p1j4o0l
2. Once it's loaded, hit the Reload icon on the internal browser (the one on the page, displaying the results. Not your own browser)
   3.
   4.

Context 🔦

The functionality seems to be correct regardless of the warning, but I'm wondering if this could have some more serious ramifications later on. I also HATE warnings ;)

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.1 |
| React | v16.7.0 |
| Browser | Chrome 72.0 |
| TypeScript | No |
| etc. | |

[oliviertassinari]

@sgermain06 You should set the item={true} property as the warning is suggesting.

[sgermain06]

Oh. I got it. Thanks!

[chilupa]

It does give me the same warning even after doing this.

<Grid container xs={12}>
    <Grid item={true} xs={8} sm={10}></Grid>
</Grid>

[oliviertassinari]

@chilupa xs is only available on flex items, a flex container doesn't allow it.

[bmakan]

This warning is quire misleading. I had to Google why I'm getting it. Maybe if "must" was replaced with "can only".

[oliviertassinari]

@bmakan What do you think about this diff?

Before

After

diff --git a/packages/material-ui-utils/src/requirePropFactory.js b/packages/material-ui-utils/src/requirePropFactory.js
index 4d6707aab1..8292921adb 100644
--- a/packages/material-ui-utils/src/requirePropFactory.js
+++ b/packages/material-ui-utils/src/requirePropFactory.js
@@ -15,7 +15,7 @@ export default function requirePropFactory(componentNameInError) {
     if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
       return new Error(
         `The prop \`${propFullNameSafe}\` of ` +
-          `\`${componentNameInError}\` must be used on \`${requiredProp}\`.`,
+          `\`${componentNameInError}\` can only be used together with \`${requiredProp}\`.`,
       );
     }

[bmakan]

@oliviertassinari I think it's much better. It's harder to judge it now when I know what it means. Maybe adding word "prop" at the end might make it even more obvious?

The prop ${propFullNameSafe} of ${componentNameInError} can only be used together with the ${requiredProp} prop.

I think item is a very generic term in programming and can cause confusion by itself when it shows up.

[oliviertassinari]

@bmakan Sounds great, do you want to work on a pull request? :)

[udayRedI]

@oliviertassinari Can I create a PR for this?