IncomingCalls.tsx

export function IncomingCalls({ calls }: Props) {
  return (
    <div>
      <p>
        Incoming Calls
      </p>

      {calls.length > 0 ?
        <div data-testid="incoming-call-list">
          {calls.map(call => <CallCard key={call.id} call={call} />)}
        </React.Fragment>
        :
        <div data-testid="no-incoming-calls">
          <p>
            It's lonely out here
          </p>
        </div>
      }
    </div>
  );
}