title: How do i add a dropdown data binding to an API Json datatable?
body: <p>Below is the datatable component. I want to add a dynamic dropdown to display the Gender, such that on the first page load, the API call uses the default parameters to get all records..</p>
  <pre><code>function Beneficiary() {
    const dispatch = useDispatch();
    const history = useHistory();
    const [person, setPerson] = useState([]);
    const [loading, setLoading] = useState(true);
   
    
  
    useEffect(() =&gt; {
      const getData = async () =&gt; {
        const response = await fetch(
          &quot;https://pshs3.herokuapp.com/bhcpf?query={}&amp;limit=0&amp;skip=0&quot;
        );
        const result = await response.json();
        const item = result.data;
  
        setTimeout(() =&gt; {
          setPerson(item);
          dispatch(setPersonDetails(item[0]));
          setLoading(false);
        }, 1000);
      };
      getData();
    }, [dispatch]);
  
  
    return (
      &lt;Wrapper&gt;
        &lt;TopWrapper&gt;
          &lt;IconButton onClick={() =&gt; history.goBack()}&gt;
            &lt;ArrowBackIcon /&gt;
          &lt;/IconButton&gt;
          
        &lt;/TopWrapper&gt;
  
  
        &lt;MiddleWrapper&gt;
          &lt;h1&gt; Beneficiaries &lt;/h1&gt;
  
          &lt;SearchWrapper&gt;
            
                //add dropdown
  
          &lt;/SearchWrapper&gt;
  
        &lt;/MiddleWrapper&gt;
  
        &lt;BottomWrapper&gt;
          {loading ? (
            &lt;Spinner /&gt;
          ) : (
            &lt;Table
              cellSpacing=&quot;40&quot;
              cellPadding=&quot;20&quot;
              striped
              bordered
              hover
              responsive
            &gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Enrollment ID&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Gender&lt;/th&gt;
                  &lt;th&gt;LGA&lt;/th&gt;
                  &lt;th&gt;WARD&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {person
                  .map((record) =&gt; {
                    return (
                      &lt;tr key={record.id}&gt;
                        &lt;td&gt;{record.enrollment_id}&lt;/td&gt;
  
                        &lt;td&gt;
                          {&quot; &quot;}
                          &lt;Link
                            onClick={() =&gt; dispatch(setPersonDetails(record))}
                          &gt;
                            {record.full_name}
                          &lt;/Link&gt;
                        &lt;/td&gt;
                        &lt;td&gt;{record.gender}&lt;/td&gt;
                        &lt;td&gt;{record.lga}&lt;/td&gt;
                        &lt;td&gt; {record.ward} &lt;/td&gt;
                      &lt;/tr&gt;
                    );
                  })}
              &lt;/tbody&gt;
            &lt;/Table&gt;
          )}
        &lt;/BottomWrapper&gt;
        
      &lt;/Wrapper&gt;
    );
  }
  
  export default Beneficiary;
  
  
  </code></pre>
  <p>However, when the dropdown changes, an event should trigger a fresh call to the API using the selected value as parameter.</p>