Eslint: Unexpected Block Statement Surrounding Arrow Body

I have a component in react and I am getting an error lint: Unexpected block statement surrounding arrow body; move the returned value immediately after the => arrow-body-style

Solution 1:

exportfunctiondashConfig(config) =>
  Component =>props => {
      const { data, isLoaded, error } = useDashConfig({ ...config });

      return<Component {...props} remoteConfig={{data, isLoaded, error }} />;
    };
  };
}

Solution 2:

You are writing an arrow function body that just immediately returns:

functionfoo() {
  console.log("hello");
  return() => {
    return() => {
      console.log("world");
    }
  }
}

// Is the same as belowfunctionbar() {
  console.log("hello");
  return() =>() => {
    console.log("world");
  }
};

foo()()();
bar()()();

This applies to your own code in the following:

exportfunctiondashConfig(config) {
  return(Component) => {
    return(props) => {
      const { data, isLoaded, error } = useDashConfig({ ...config });

      return<Component {...props} remoteConfig={{data, isLoaded, error }} />;
    };
  };
}

// Is the same as thisexportfunctiondashConfig(config) {
  return(Component) =>(props) => {
    const { data, isLoaded, error } = useDashConfig({ ...config });

    return<Component {...props} remoteConfig={{data, isLoaded, error }} />;
  }
}