I am getting this error in the app.js file in my react project:-
Fragments should contain more than one child - otherwise, there‘s no need for a Fragment at all react/jsx-no-useless-fragment
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NavMenu from './components/NavMenu';
export default function App() {
return (
<>
<Router>
<NavMenu />
</Router>
</>
);
}
I have been trying to find a solution but couldn't get one so can someone pls tell me how to fix this
Any help would be appreciated
Your component is returning the equivalent to this:
<React.Fragment>
<Router>
<NavMenu />
</Router>
</React.Fragment>
<></> is shorthand syntax.
The fragment is for cases when you want to return more than one component or element as siblings. But because a component must only return one thing, we can use fragments to put a sort of "invisible wrapper" around two components to make it appear to be one.
Here is an example of when a component might like to use a fragment:
return (
<>
<Navbar />
<Router>
<Routes>
<Route index element={<Home />} />
</Routes>
</Router>
</>
);
Because you are only returning one element inside that fragment, it is not really doing anything, so just remove the fragment or include another component inside of it.
React is not supposed to return adjacent elements, so if you just return one component or element there is no need for using <></> or <React.Fragment></React.Fragment> (these are equivalent).
You will probably encounter situations when you need to return 2 div elements one next to another (like siblings). In that case <></> will come in handy.
I got the same error today due to the fact that I had ternary operator in the following manner:
<>
{isCheck ? (
<button
....
>
</button>
) : (
<div className={class}>
....
</div>
)}
</>
Whan I realized is that without the wrapping element it was not running as it is supposed to be.
My solution was just to replace the Fragment with div.
That made lint happy and the red flag disappeared.