title: React - how map an array of objects and add a title without repeating and just showing each unique ttitle
body: <p>I'm trying to map out an array of objects in react but I'm stuck trying to map each entry.</p>
  <pre><code>const activities = [
    { value: &quot;uniqueValue1&quot;, title: &quot;Dancing&quot;, label: &quot;Cha cha slide&quot; },
    { value: &quot;uniqueValue2&quot;, title: &quot;Dancing&quot;, label: &quot;Doing the salsa&quot; },
    { value: &quot;uniqueValue3&quot;, title: &quot;Swimming&quot;, label: &quot;Back stroke&quot; },
    { value: &quot;uniqueValue4&quot;, title: &quot;Swimming&quot;, label: &quot;Diving in the pool&quot; },
    { value: &quot;uniqueValue5&quot;, title: &quot;Playing&quot;, label: &quot;With toys&quot; },
    { value: &quot;uniqueValue6&quot;, title: &quot;Playing&quot;, label: &quot;With friends&quot; },
  ]
  </code></pre>
  <p>and i'm looking to map each out into a checkbox to be selected:</p>
  <pre><code>&lt;ul&gt;
      {activityOptions.map(({ title, label }, index) =&gt; {
        return (
          &lt;p key={index}&gt;
            &lt;div&gt;
              &lt;div&gt;
                &lt;input
                  type=&quot;checkbox&quot;
                  id={`custom-checkbox-${index}`}
                  name={label}
                  value={label}
                  class=&quot;form-check-input&quot;
                  defaultValue={settingState.activity}
                  onChange={(value) =&gt; {
                    setSettingState({...settingState, ...{ activity: value }});
                  }}
                  options={activityOptions}
                  isDisabled={settingState.company}
                /&gt;
                &lt;h6 htmlFor={`custom-checkbox-${index}`}&gt;{type}&lt;/h6&gt;
                &lt;label htmlFor={`custom-checkbox-${index}`}&gt;{label}&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/p&gt;
        );
      })}
    &lt;/ul&gt;
  </code></pre>
  <p>how would I get it map collective titles rather than printing one per line?</p>
  <pre><code>Dancing: &lt;--- h6 maybe
  cha cha sldide &lt;--- checkbox
  doing the salsa
  
  Swimming:
  Back stroke
  Diving in the pool
  
  etc...
  </code></pre>
  <p>Rather than</p>
  <pre><code>Dancing:
  cha cha slide
  Dancing:
  doing the salsa
  Swimming:
  Back stroke
  Swimming:
  Diving in the pool
  
  etc...
  </code></pre>