React App Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`. Error Message

I am new to React and trying to code my own apps. I have the following code using styled-components. I have imported the Header.js into App.js ready for it to render in the browser. And I can see the output (Hello Content) in the browser.

import React from "react";
import styled from "styled-components";

const Header = () => {
  return (
    <Container>
      <Content>
        <h1>Hello Content</h1>
      </Content>
    </Container>
  );
};

const Container = styled.div``;
const Content = styled.div``;

export default Header

BUT I am getting the following error when I am trying to use ESLint. And I don’t understand why. I have added my eslintrc.json code. Not sure if my eslintrc.json file code is wrong.

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error",
        "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}]
    }
}

Answer

Your eslint is configured to not allow functions that only have a return statement. You could either disable that rule or re-write the component like this:

const Header = () => (
  <Container>
    <Content>
      <h1>Hello Content</h1>
    </Content>
  </Container>
);

Advertisement

Answer