ESLint React error Unexpected block statement surrounding arrow body

Question

const App = () => {
    return (
        <div className="app">
            <div className="landing">
                <h1>svideo</h1>
                <input type="text" placeholder="Search" />
                <a>or Browse All</a>
            </div>
        </div>
    );
};

Using AirBnB config. Getting this error in react component using JSX

4:19 error Unexpected block statement surrounding arrow body arrow-body-style

Answer 1

When you just return without any other logic, the eslinter wants you to remove the block and use the implicit return:

const App = () => (
  <div className="app">
     <div className="landing">
        <h1>svideo</h1>
        <input type="text" placeholder="Search" />
        <a>or Browse All</a>
     </div>
  </div>
);