CODEWITHSUNDEEP
typescriptmaterial-ui
Marco
Marco

Reputation: 1

Material UI Grid - Typescript Grid dynamically spacing warning

Typescript give me an error about spacing value:

TS2322: Type 'number' is not assignable to type 'boolean | 7 | 2 | 10 | 1 | 3 | 4 | 5 | 6 | 8 | "auto" | 9 | 11 | 12'.
No lint errors found
Version: typescript 3.5.2, tslint 5.14.0

Iterate on an array and set a xl, lg, .. and so on prop dinamically:

<Grid container spacing={2}>
  {row.map(resumeItem =>
     <Grid key={resumeItem.id} item xs={12} lg={6} xl={resumeItem.space}>
       ...
     </Grid>
   )}
</Grid>

Of course space property is a number!

Upvotes: 0

Views: 621

Answers (2)

Marco
Marco

Reputation: 1

Thanks to all. If i try to use this approach:

space: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

The problem not resolve. If I use an an hoc interface not working too, so i'm using the any approach for the moment.

Thank you!

Upvotes: 0

Andrew Keller
Andrew Keller

Reputation: 3239

The reason you are receiving this typescript error is because your space property allows any number, but the xl prop allows only a subset of numbers (specifically, any integer 1-12). So for example, you could assign the number '17.2' to space, which would be a perfectly acceptable value for it, but would not be an acceptable value to assign to xl.

The best way to address this would be to change your type definition of Number for space to one that resembles that of the xl prop, i.e.

space: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Of course, this could have some upstream implications depending on how you are assigning a value to it.

You could also do as suggested by the commenter and cast space as any... just note that what this is effectively doing is disabling type checking for this instance and you will lose the ability for Typescript to detect whether you're passing a possibly incompatible value to xl. It's a tradeoff that only you can decide if it's worth it.

Upvotes: 1

Related Questions