WebStorm Unresolved Variable Warning

Question

I use WebStorm for React JS, and I get this warning "Unresolved variable" with all the details.

But everything works without problems, the language is defined, it exists. The code works, I have no problems with my application.

This is what I have inside Languages & Frameworks > JavaScript > Libraries

Any idea how to avoid these warnings?

UPDATE

Sample code where this occurs. First parent component:

 import ExpirationTimer from '../../common/expirationTimer'; export default class ListView extends React.Component { render (){ const language = this.props.language; let expirationDate = "Wed May 10 2017 15:58:59 GMT+0200"; return ( <div> <ExpirationTimer expirationDate={expirationDate} language={language}/> </div> ) } } 

Where language is the object {lowestPrice: "Lowest price", mileage: "Mileage", ....}

And then the component where I try to get these details, it works, but I warn that they are not resolved:

  export default class ExpirationTimer extends React.Component { constructor(props){ super(props); this.state = { expirationDate: this.props.expirationDate // Here I get the warning }; } render(){ let language = this.props.language; // Here I get the warning return ( <div> ..... </div> ); } } 

Answer 1

use the destructuring assignment: let {language} = this.props instead of let language = this.props.language;