eslint: Unexpected block statement surrounding arrow body

Question

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

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

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

Which return should I remove? I didn't quite understand the explanation. Thanks!

Answer 1

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

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

Answer 2

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

 function foo() { console.log("hello"); return () => { return () => { console.log("world"); } } } // Is the same as below function bar() { console.log("hello"); return () => () => { console.log("world"); } }; foo()()(); bar()()();

This applies to your own code in the following:

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

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

// Is the same as this

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

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

Answer 3

if there is only one return in the statement, we should remove the return like the following example.

res => {
    return new Promise().resolve(null);
}

Should be in this way

res => (new Promise().resolve(null)); 

To your case, it should be like the following

export function dashConfig(config) =>
  Component =>
    props => {
      const { data, isLoaded, error } = useDashConfig({ ...config });
      return <Component {...props} remoteConfig={{ data, isLoaded, error }} />;
    };
  };
}