I currently have this code, but EsLint shows the following error: "Fragments must contain more than one child - otherwise there is no need for a fragment.". But I can't do an IF without wrapping the code in a React.Fragment. Is there another way to remove this error without allowing a lint rule?
return (
<>
{loading && (
<div className={classes.container}>
<img
alt="loading"
src={LoadingAnimation}
className={classes.img}
/>
</div>
)}
</>
);
You need to return JSX inside the Fragment for instance:
Bad
return (
<>
<div>
{users.map(user => {
<p>{user}</p>
})}
</div>
</>
)
Good
return (
<>
<div>
{users.map(user => {
return <p>{user}</p>
})}
</div>
</>
)
so in your case I would do:
return (
<>
{loading ? (
<div className={classes.container}>
<img
alt="loading"
src={LoadingAnimation}
className={classes.img}
/>
</div>
) : null}
</>
);
This is a way to fix
return loading ? (
<div className={classes.container}>
<img
alt="loading"
src={LoadingAnimation}
className={classes.img}
/>
</div>
)
: null;