How to use the ttag.ngettext function in ttag

if (showNonCollection[section.id]) {
      // Already pressed it, so show a button to edit collection.
      return (

);
    }
    if (showSpoilerCards) {
      return (

renderCards() {
    const namedCards = this.namedCards();
    const [inCollection, nonCollection] = partition(namedCards, card => this.inCollection(card));
    return (
      <>
        { inCollection.map(card => this.renderCard(card)) }
        { nonCollection.length > 0 ? (

const view = (hours, minutes, seconds) => {
    const hoursTxt = ngettext(msgid`${hours} hour`, `${hours} hours`, hours);
    const minutesTxt = ngettext(msgid`${minutes} minute`, `${minutes} minutes`, minutes);
    const secondsTxt = ngettext(msgid`${seconds} second`, `${seconds} seconds`, seconds);

    return `
    <h1>${ t`webpack with ttag localization demo` }</h1>
    <h2>${ t`Current time is` }</h2>
    <h3>${hoursTxt} ${minutesTxt} ${secondsTxt}</h3>
    `
};

const view = (hours, minutes, seconds) => {
    const hoursTxt = ngettext(msgid`${hours} hour`, `${hours} hours`, hours);
    const minutesTxt = ngettext(msgid`${minutes} minute`, `${minutes} minutes`, minutes);
    const secondsTxt = ngettext(msgid`${seconds} second`, `${seconds} seconds`, seconds);

    return `
    <h1>${ t`webpack with ttag localization demo` }</h1>
    <h2>${ t`Current time is` }</h2>
    <h3>${hoursTxt} ${minutesTxt} ${secondsTxt}</h3>
    `
};

export default function ArticleInfo({ article }) {
  const createdAt = new Date(article.createdAt);
  const { replyRequestCount, replyCount } = article;
  return (
    <div>
      {ngettext(
        msgid`${replyRequestCount} occurence`,
        `${replyRequestCount} occurences`,
        replyRequestCount
      )}
      {article.replyCount &gt; 0 ? (
        <span>
          ・
          {ngettext(
            msgid`${replyCount} response`,
            `${replyCount} responses`,
            replyCount
          )}
        </span>
      ) : (
        ''
      )}
      {isValid(createdAt) ? (
        <span title="{format(createdAt,">
          ・{formatDistanceToNow(createdAt)}
        </span>
      ) : (
        ''
      )}
      <style>{`</style></div>

render() {
    const { items } = this.props;

    if (!items || !items.length) return null;

    const replyLink = (
      <a>
        {ngettext(
          msgid`${items.length} reply`,
          `${items.length} replies`,
          items.length
        )}
      </a>
    );

    return (
      <li>
        <span>{jt`There are ${replyLink} deleted by its author.`}</span>
        {this.renderModal()}

        <style>{`
          li {
            padding: 12px 24px 0;
          }</style></li>