How to conditionally set the width property of a Semantic UI React Grid column?

Question

I would like to conditionally set the width of the columns below depending on another value but when I try to change the number constants to a variable, I get Typescript errors that they can only be set to discrete values. Is there a good way to conditionally set this property, or do I have to write a grid column for every case?

          <Grid>
            <Grid.Row>
              <Grid.Column width={4}>
                <Image src={"http://localhost:5000/img/" + image} />
              </Grid.Column>
              <Grid.Column width={12}>
                <Card />
              </Grid.Column>
            </Grid.Row>
          </Grid>

Answer 1

If you were to change the values inside the width prop, you could use a ternary operator inside it. Like this:

<Grid.Column width={ condition ? <column number if true> : <column number if false> } />

Not sure if this is the best way, but this approach has helped me in structuring stuff in SUI-R.