Dropdown bound with listbox and item selection of the listbox bound with the button visibility React

Question

I have requirement for the component which has a dropdown, which fills from web api, that dropdown is bound with a list box, which displays an unordered list, that unordered list displays items with editable (selectable) checkboxes, and this component has a download button.

Basically how it does is, 1. dropdown shows the directories in a folder, each directory is shown as an item in the dropdown (just as string items though​).

2. When a directory is selected, the dropdown change event makes a call to the api, which shows all the files within that directory. these files are just shown as names with checkboxes as unordered list within the listbox that's bound with the dropdown

3. Until user selected at least one checkbox or all checkboxes the download button wouldn't be visible, it should become invisible if all the items in the listbox are unselected automatically.

4. Once the user makes the selection and clicks on download, it calls the web api which zips all the selected files and names it as the selected text of the dropdown and lets user download the zip file at the client side.

Can anybody please suggest me for something from the below Code, how to achieve this functionality - thanks in advance.

class AccessData extends React.Component {
state = {
    files: [],
    communities: [],
    selectedCommunity: { display: 'Select a Community...', value: '' },
    communityValidationError: ""
 }

componentDidMount() {
    let env = clientConfiguration['Environment'];
    let x = `communitiesApi.${env}`;
    alert(clientConfiguration[x]);

    fetch(clientConfiguration['communitiesApi.local'])
        .then((response) => {
        return response.json();
    })
      .then(data => {
            let communitiesFromApi = data.map(community => { return { value: community, display: community } })
            this.setState({ communities: [{ value: '', display: 'Select a Community...' }].concat(communitiesFromApi) });
 })
.catch(error => {
    console.log(error);
    });
  }

handleDDLCommunityChange = (event) => {
    alert(event.target.value);
    this.setState({
        selectedCommunity: event.target.value
    });

    alert(this.state['selectedCommunity'].display);
 }

render() {
    return (
      <main>
        <div className="container">
        <div className="aqview-section">

        <div id="download_tool">
          <form id="download_form" method="post">
            <div className="row">
            <div className="col-md-12">
              <div className="header-box">
                <h2>Data Download Tool</h2>
              </div>
              <select id="communityName" title="Select a Community" name="communityName" onChange={"this.handleDDLCommunityChange.bind(this")} value={"this.state.selectedCommunity"}>
                {this.state.communities.map((community) => <option key={"community.value"} value={"community.value"}>{community.display}</option>)}
              </select>
              <div id="file_list_box">
                <p>
                  Data Files
                </p>
                <ul id="file_listing">
                  <li>Please select a community to display available files.</li>
                </ul>
              </div>
              <button id="download" styles="display: none;">Download</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>
);
}
}

export default connect()(AccessData);

And my dropdown is as below:

<select id="communityName" title="Select a Community" name="communityName" onChange={this.handleDDLCommunityChange.bind(this)} value={this.state.selectedCommunity}>
{this.state.communities.map((community) => <option key={community.value} value={community.value}>{community.display}</option>)}

Any help please

Answer 1

Here is a working sample of the code changes needed to achieve first 3 points of your requirement -

https://codesandbox.io/s/react-example-40wx5

(I have used setTimeout just to mimic api call functionality)

Regarding point 4, you can refer to this question in Stackoverflow on how to download a zip file.