title: Send selected options from react dual listbox with post request
body: <p>I'm trying to implement in my react app, two react double listbox in my component. At the moment the listboxes are filled automatically after a get request when component mounts. I need some help on how to get the selected options in each double listbox and send them to the server as json data.
  I need two arrays from these lists.</p>
  <p>This is my dual listbox classes:</p>
  <pre><code>import React from 'react';
  import DualListBox from 'react-dual-listbox';
  import 'react-dual-listbox/lib/react-dual-listbox.css';
  import 'font-awesome/css/font-awesome.min.css';
  
  export class FirstList extends React.Component {
      state = {
          selected: [],
      };
  
      onChange = (selected) =&gt; {
          this.setState({ selected });
      };
  
      render() {
          const { selected } = this.state;
  
          return (
              &lt;DualListBox
                  canFilter
                  filterPlaceholder={this.props.placeholder || 'Search From List 1...'}
                  options={this.props.options}
                  selected={selected}
                  onChange={this.onChange}
              /&gt;
          );
      }
  }
  
  export class SecondList extends React.Component {
      state = {
          selected: [],
      };
  
      onChange = (selected) =&gt; {
          this.setState({ selected });
      };
  
      render() {
          const { selected } = this.state;
  
          return (
              &lt;DualListBox
                  canFilter
                  filterPlaceholder={this.props.placeholder || 'Search From List 2...'}
                  options={this.props.options}
                  selected={selected}
                  onChange={this.onChange}
              /&gt;
          );
      }
  }
  </code></pre>
  <p>In my component I started importing this:</p>
  <pre><code>    import React, { useState, useEffect } from 'react'
          import LoadingSpinner from '../shared/ui-elements/LoadingSpinner';
          import ErrorModal from '../shared/ui-elements/ErrorModal';
          import { FirstList, SecondList } from '../shared/formElements/DualListBox';
          import { useHttpClient } from '../shared/hooks/http-hook';
          
          const MyComponent = () =&gt; {
          const { isLoading, error, sendRequest, clearError } = useHttpClient();
          const [loadedRecords, setLoadedRecords] = useState();
          
           useEffect(() =&gt; {
                  const fetchRecords = async () =&gt; {
                      try {
                          const responseData = await sendRequest(
                              process.env.REACT_APP_BACKEND_URL + '/components/get'
                          );
                          setLoadedRecords(responseData)
                      } catch (err) { }
                  };
                  fetchRecords();
              }, [sendRequest]);
          
          ...
          
          ...
          
           return (
      &lt;React.Fragment&gt;
          &lt;ErrorModal error={error} onClear={clearError} /&gt;
          &lt;form&gt;
              &lt;div className=&quot;container&quot;&gt;
                  &lt;div className=&quot;row&quot;&gt;
                      &lt;div className=&quot;col-md-6&quot;&gt;
                          &lt;fieldset name=&quot;SerialField&quot; className=&quot;border p-4&quot;&gt;
                              &lt;legend className=&quot;scheduler-border&quot;&gt;&lt;/legend&gt;
                              &lt;div className=&quot;container&quot;&gt;
                                  &lt;p&gt;SERIALS&lt;/p&gt;
                                  {loadedRecords ? (
                                      &lt;FirstList id='Serials' options={loadedRecords.firstRecordsList} /&gt;
                                  ) : (
                                          &lt;div&gt;
                                              &lt;label&gt;List is loading, please wait...&lt;/label&gt;
                                              {isLoading &amp;&amp; &lt;LoadingSpinner /&gt;}
                                          &lt;/div&gt;
                                      )}
                              &lt;/div&gt;
                          &lt;/fieldset&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-md-6&quot;&gt;
                          &lt;fieldset name=&quot;SystemsField&quot; className=&quot;border p-4&quot;&gt;
                              &lt;legend className=&quot;scheduler-border&quot;&gt;&lt;/legend&gt;
                              &lt;div className=&quot;container&quot;&gt;
                                  &lt;p&gt;SYSTEMS&lt;/p&gt;
                                  {loadedRecords ? (
                                      &lt;SecondList options={loadedRecords.secondRecordsList} /&gt;
                                  ) : (
                                          &lt;div&gt;
                                              &lt;label&gt;List is loading, please wait...&lt;/label&gt;
                                              {isLoading &amp;&amp; &lt;LoadingSpinner /&gt;}
                                          &lt;/div&gt;
                                      )}
                              &lt;/div&gt;
                          &lt;/fieldset&gt;
                      &lt;/div&gt;
  
  ...
  
  ...
  </code></pre>
  <p>If anyone could guide me it'll be much appreciated.</p>
  <p>Thanks in advance!</p>