Prop destructuring inside of react state

Question

I've added airbnb config for eslint that encourages prop and state destructuring, I like it, but stumbled across one problem when I define state in my component

class MyComponent extends Component {
  state = {
    animation: this.props.active ? 1 : 0
  }

I get an error

[eslint] Must use destructuring props assignment (react/destructuring-assignment)

I'm not sure how can I correctly destructure active out of props here? Usually const {active} = this.props works, but whenever I place it inside state or around it I get unexpected syntax error.

you have to move it into the constructor ... or you just ignore the warning — Jonas Wilms
@JonasW. gotcha, well if I ignore it it ignores it everywhere or I end up with a lot of eslint disable comments :/ an idea if this can be somehow disabled globally for state = { pattern? — Ilja

Jonas Wilms Jonas Wilms · Accepted Answer · 2018-07-07T11:06:33

The only to keep it inside of the class property is to use a getter (which will be invoked at the first render):

state = {
  get animation() {
    const { active } = this.props;
    return active ? 1 : 0;
  }
}

Or you use an IIFE to initialize the property:

state = (() => {
  const { active } = this.props;
  return { animation: active ? 1 : 0 };

})()

But thats actually a bit overcomplicating. Another solution would be to move the property into the constructor:

constructor(...args) {
 super(...args);

 const { active } = this.props;
 this.state = { animation: active ? 1 : 0 };

}

But I personally would just ignore that warning here.

Prop destructuring inside of react state

2 Answers