A component using its "Component Hook"

CharacterList.tsx

import React from 'react';
import { useCharacterList } from './useCharacterList';
import {
  Button,
  Wrapper,
  List,
  ListItem,
  ListItemInfo,
  NameWrapper,
  IsJediWrapper,
  HeaderTypography,
  Spinner,
} from './styles';

export const CharacterList = () => {
  const [data, handlers] = useCharacterList();
  const { characters, loading } = data;
  const { onRefresh } = handlers;

  return (
    <Wrapper>
      Star Wars Characters
  
      <Button onClick={onRefresh}>Refresh List</Button>
      
      {loading ? <Spinner /> : (
        <List>
          <ListItem>
            <NameWrapper>
              <HeaderTypography>
                Name
              </HeaderTypography>
            </NameWrapper>
            <ListItemInfo>
              <HeaderTypography>
                Age
              </HeaderTypography>
            </ListItemInfo>
            <IsJediWrapper>
              <HeaderTypography>
                isJedi
              </HeaderTypography>
            </IsJediWrapper>
          </ListItem>
          {characters.map((c) => (
            <ListItem key={c.name}>
              <NameWrapper>
                {c.name}
              </NameWrapper>
              <ListItemInfo>
                {c.age}
              </ListItemInfo>
              <IsJediWrapper>
                {c.isJedi ? 'True' : 'False'}
              </IsJediWrapper>
            </ListItem>
          ))}
        </List>
      )}
    </Wrapper>
  );
};