如何在使用React上下文（消费者提供者）时修复eslint错误？

Question

I'm using React Context API with ESLint enabled and having some issues fixing ESLint issues.

Provider:

 return (
      <AuthorizationContext.Provider
        value={{ isAuthorized: this.state.isAuthorized }}
      >
        {this.props.children}
      </AuthorizationContext.Provider>

Problem: ESLint reports Parsing error: Unexpected token . for <AuthorizationContext.Provider>

Consumer:

 <AuthorizationConsumer>
        {({ isAuthorized}) => {
          return (
             // some code here
          )
        }}
      </AuthorizationConsumer>

Problem: ESLint reports Parsing error: Unexpected token { for {({ isAuthorized}) => {

ESLint configuration .

Answer 1

With your configuration, I have no error: https://codesandbox.io/s/j2km74l0y9

But I get the same error when <AuthorizationContext.Provider> is not inside a function, or when the code is not valid. Maybe check your component.