CR-error-treatment-vars.jsx

const UserList = ({ isLoading, results, error }) => {
  const shouldDisplayLoader = !error && isLoading;
  const shouldDisplayNoResults = !error && !isLoading && !results.length;
  const shouldDisplayList = !error && !isLoading && results.length > 0;

  return (
    <div>
      <div>
        <h1>Users</h1>
        <a href="/users/create">New User</a>
      </div>
      <div>
        {error && <span>Something is not right!</span>}
        {shouldDisplayLoader && <span>Loading...</span>}
        {shouldDisplayNoResults && (
          <span>No Results Found</span>
        )}
        {shouldDisplayList && (
          <ul>
            {result.map((user) => (
              <li key={user.id}>{user.name}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};