如何修复传递props给MyLayout时的ESLint箭头函数体块语句错误？

Got it, let's tackle this ESLint error you're seeing when passing props to MyLayout! The "unexpected block statement surrounding arrow body" message is just ESLint nudging you to write more concise code—you’ve got unnecessary curly braces ({}) and an explicit return in your arrow function props when an implicit return would work better.

First, let's look at what your problematic code probably looks like #

Chances are you have something similar to this:

const App = () => {
  return (
    <MyLayout
      header={() => {
        return <Header title="Home" />;
      }}
      content={() => {
        return <MainContent />;
      }}
    />
  );
};

The curly braces around each arrow function body here are redundant because you’re only returning a single expression (the JSX element). That’s exactly what’s triggering the ESLint rule (it’s called arrow-body-style, if you’re curious).

How to fix it (two common scenarios) #

1. Single expression (most common case)

If your arrow function prop only needs to return one JSX element or value, just remove the curly braces and the return keyword entirely. ESLint will accept this implicit return:

const App = () => {
  return (
    <MyLayout
      header={() => <Header title="Home" />}
      content={() => <MainContent />}
    />
  );
};

This is the cleanest, most straightforward fix for simple props.

2. Multiple lines of logic before returning

If you need to run some code (like setting variables, conditionals, or API calls) before returning the JSX, then keeping the curly braces is okay—ESLint only complains when the block is unnecessary. For example:

const App = () => {
  return (
    <MyLayout
      header={() => {
        // This block is necessary because we're running logic first
        const currentUser = getCurrentUser();
        return <Header title="Home" user={currentUser} />;
      }}
      content={() => <MainContent />}
    />
  );
};

Since we’re doing more than just returning a single expression here, ESLint won’t flag this.

Handling multi-line JSX #

If your JSX needs to span multiple lines for readability, wrap it in parentheses instead of curly braces for the implicit return:

const App = () => {
  return (
    <MyLayout
      header={() => (
        <Header 
          title="Home" 
          subtitle="Welcome back to your dashboard"
          showNotifications={true}
        />
      )}
      content={() => (
        <MainContent>
          <h1>Latest Updates</h1>
          <NotificationList />
        </MainContent>
      )}
    />
  );
};

This keeps your code neat while still following the ESLint rule.

Quick recap of the rule #

ESLint’s arrow-body-style rule exists to balance readability and conciseness: use implicit returns (no braces) for single-expression arrow functions, and use braces only when you need multiple statements or logic before returning.

内容的提问来源于stack exchange，提问作者AnnaSm