Actualmente tengo este código, pero EsLint muestra el siguiente error: "Los fragmentos deben contener más de un elemento secundario; de lo contrario, no hay necesidad de un fragmento". Pero no puedo hacer un IF sin envolver el código en un React.Fragment. ¿Hay otra forma de eliminar este error sin permitir una regla de pelusa?
return ( <> {loading && ( <div className={classes.container}> <img alt="loading" src={LoadingAnimation} className={classes.img} /> </div> )} </> );Debe devolver JSX dentro del Fragmento, por ejemplo:
Malo
return ( <> <div> {users.map(user => { <p>{user}</p> })} </div> </> )Bueno
return ( <> <div> {users.map(user => { return <p>{user}</p> })} </div> </> )así que en tu caso yo haría:
return ( <> {loading ? ( <div className={classes.container}> <img alt="loading" src={LoadingAnimation} className={classes.img} /> </div> ) : null} </> );Esta es una forma de arreglar
return loading ? ( <div className={classes.container}> <img alt="loading" src={LoadingAnimation} className={classes.img} /> </div> ) : null;