How to handle a conditional operator w JavaScript+React?

Question

I have the following JavaScript:

const { inverseDirection } = this.props;

if inverseDirection is false, I need the following:

const dashOffset =
  dashArray - (dashArray * this.state.percentProgress) / 100;

if inverseDirection is true, I need the following:

const dashOffset =
  dashArray + (dashArray * this.state.percentProgress) / 100;

What is the right way to elegantly code this without duplication the entire line?

GifCo · Accepted Answer · 2019-05-13 23:26:41Z

2

You can do

const dashOffset = inverseDirection 
? ( dashArray + (dashArray * this.state.percentProgress) / 100) 
: (dashArray - (dashArray * this.state.percentProgress) / 100)

Not really that elegant but anything more complex would be a waste of time and probably not very readable.

answered May 13, 2019 at 23:26

GifCo

1,3728 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akrion · Accepted Answer · 2019-05-14 00:16:54Z

1

You could try this:

const { inverse } = this.props;

let calc = (x, y) => (x * y) / 100

let offset = arr + (inverse ? -1 : 1)*(calc(arr, this.state.percentProgress))

This way you can extract/reuse the calc function (or move to utils etc) and the inverse operation boils down to a simply inverse ? -1 : 1 which is what you are really after.

edited May 14, 2019 at 0:16

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

answered May 13, 2019 at 23:31

Andrei Gătej

12.1k1 gold badge22 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to handle a conditional operator w JavaScript+React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related