[FIXED] why using arrow function is causing error in my code?

Issue

I am developing an application in React but these errors are causing troubles. This is my code -

import React from 'react';
import { Link } from 'react-router-dom';

const LINKS = [
  { to: '/', text: 'Home' },
  { to: '/starred', text: 'Starred' },
];

const Navbar = () => {
  return (
    <div>
      <ul>
        {LINKS.map(item => (
          <li key={item.to}>
            <Link to={item.to}>{item.text}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Navbar;

const Navbar is producing these 2 errors Line 3:17: Function component is not a function declaration
Line 3:23: Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

When i am try to fix the problem VScode changes the code to -

function Navbar() {
  return (
    <div>
      <ul>
        {LINKS.map(item => (
          <li key={item.to}>
            <Link to={item.to}>{item.text}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

but i want to use const arrow function in my code please provide me the solution

Solution

This looks like an eslint error since it isn't any errors in your code but instead that you don't follow your eslint-rules. This specific error message seems to refer to react/function-component-definition rule.

This option enforces a specific function type for function components.

ESLint Rule

Go to your eslint configuration and either remove or override this rule and turn it off by setting it to 0 or off

module.exports = {
  extends: [...],
  rules: {
    ...,
    "react/function-component-definition": 0,
  },
};

Answered By - Fralle
Answer Checked By - - Senaida (ReactFix Volunteer)