CR-extracting-block.jsx

const UserListResults = ({ error, results, isLoading }) => {
  if (error) {
    return <span>Something is not right!</span>;
  }

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (!results.length) {
    return <span>No Results Found</span>;
  }

  return (
    <ul>
      {result.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

const UserList = ({ isLoading, results, error }) => (
  <div>
    <h1>Users</h1>
    <a href="/users/create">New User</a>
  </div>
  <div>
    <UserListResults
      error={error}
      results={results}
      isLoading={isLoading}
    />
  </div>
);