title: How can I save multiple categories checkboxes in an array json object in React
body: <p>I am building a page to create post where user can select multiple categories, </p>
  
  <p>I am having the problem when I am sending the data with the post request with multiple categories object, I am unable to collect the multiple category ids in single object to send with other data.</p>
  
  <p><strong>Default states</strong></p>
  
  <pre><code>constructor (props){
      super(props);
      this.state = {
          title: '',
          menuItems: [],
          shortDescription: '',
          body: RichTextEditor.createEmptyValue(),
          metaDescription: ''
      };
      this.onChangeHandler = this.onChangeHandler.bind(this);
  }
  </code></pre>
  
  <p><strong>On changed handler for other fields</strong></p>
  
  <pre><code>onChangeHandler = (event) =&gt; {
      const target = event.target;
      const value = target.value;
      const name = target.name;
      this.setState({
          [name] : value
      })
  }
  </code></pre>
  
  <p><strong>Category change handler which is returning new array object of each category id</strong></p>
  
  <pre><code>categoryChangeHandler = (e, data) =&gt; {
      let selectedMenuItems = {
          categoryId: data.value,
      }
      console.log(selectedMenuItems);
  }
  </code></pre>
  
  <p><strong>Fetching list of categories from the api</strong></p>
  
  <pre><code>{this.state.menuItems.map((menuItem) =&gt;
      &lt;Grid.Column key={menuItem.id} width={4}&gt;
          &lt;Checkbox label={menuItem.title} name={menuItem.title} 
          key={menuItem.id} 
          value={menuItem.id}
          onChange={(e, data) =&gt; this.categoryChangeHandler(menuItem.key, data)} /&gt;
      &lt;/Grid.Column&gt;
  )}
  </code></pre>