title: Is there a better way to compose a message based on conditions?
body: <p>I am trying to display a message based on user activity, the message changes based on how many users came back in the payload <code>others</code>. The following code works but it is bulky and feels off somehow.</p>
  <p>What I'm doing:</p>
  <ul>
  <li><p>Less than 3: “Along with Billy Bob and Tom Thomason.”</p>
  </li>
  <li><p>Exactly 3: “Along with Billy Bob, Tom Thomason, and Mary Maryland.”</p>
  </li>
  <li><p>Greater than 3: “Along with Billy Bob, Tom Thomason, and 3 others.”</p>
  </li>
  </ul>
  <pre><code>const handleActivitySummary = useCallback(
    (verb, others) =&gt; {
      if (verb === &quot;SHARED_POST&quot;) {
        return &quot;shared a post&quot;;
      } else {
        const userJoined = verb === &quot;MEMBER_ADDED&quot;;
        let summary;
  
        userJoined
          ? (summary = `has joined ${post.slug}`)
          : (summary = `has left ${post.slug}`);
  
        if (others &amp;&amp; others.length &lt; 3) {
          summary += ` along with ${others
            .map((user) =&gt; user.full_name)
            .join(&quot;, &quot;)
            .replace(/, ([^,]*)$/, &quot; and $1&quot;)}`;
        }
        if (others &amp;&amp; others.length === 3) {
          summary += ` along with ${others
            .map((user) =&gt; user.full_name)
            .join(&quot;, &quot;)
            .replace(/, ([^,]*)$/, &quot;, and $1&quot;)}`;
        }
        if (others &amp;&amp; others.length &gt; 3) {
          const newArray = others.slice(0, 3);
          const usersLeft = others.length - newArray.length;
          summary += ` along with ${newArray
            .map((user) =&gt; user.full_name)
            .join(&quot;, &quot;)} and ${usersLeft} ${pluralize(usersLeft, &quot;other&quot;)}`;
        }
  
        return summary;
      }
    },
    [post]
  );
  </code></pre>