React JS - How do I bind json data to a dropdown list

Question

I have a react JS file and I\'m attempting to bind data to a dropdown list. The data is stored in the following testing API/json file: https://api.myjson.com/bins/okuxu ...I wan

Answer 1

Though your question is not clear, I assume you want to populate the api data into the respective dropdown

To populate data into the respective dropdown list

    <div>
   <select className="custom-select" id="clientName" onSelect="bindDropDowns()">
      this.state.data.map((obj) => 
      <option key={obj.clientName}>{obj.clientName}</option>
      );
   </select>
</div>
<br />
<div>
   <select className="custom-select" id="siteName">
                this.state.data.map((obj) => 
      <option key={obj.siteName}>{obj.siteName}</option>
      );
   </select>
</div>
<br />
<div>
   <select className="custom-select" id="segmentName">
                         this.state.data.map((obj) => 
      <option key={obj.segmentName}>{obj.segmentName}</option>
      );
   </select>
</div>
<br />

Answer 2

If you want to hold your data in a seperate json file;

You can declare the data like this.

export const Cities = {
    cities : [
        { Key: 1, Value: 'London' },
        { Key: 2, Value: 'New York' },
        { Key: 3, Value: 'Colombo' }    
    ]
}

export default Cities;

And we'll assume that it's in a file called cities.jsx

You import this file in the component where your dropdown list is in like this.

import {Cities} from "../../assets/data/cities.jsx";

(Give the right file path).

Then you can use it on your form control.

<FormControl as="select" onChange={(e) => this.handleCities(e)}>
    {Cities.cities && Cities.cities.map((e, key) => {
    return <option key={key} value={e.Key}>{e.Value}</option>;
 })}

Answer 3

In React, you use a declarative approach instead of DOM manipulation:

<div>
  {['clientName', 'siteName', 'segmentName'].map(key => (
    <select key={key}>
      {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
    </select>
  ))}
</div>

This generates the 3 dropdowns with the options populated.

Answer 4

In this.state define the json -

CityNames : {
                CityName : 
                    [
                        {CityKey : 1,CityDescription: 'abc'},
                        {CityKey : 2,CityDescription: 'xyz'}
                    ]

        }

Here is the code for Drop Down List

<select className="form-control">
          <option>---select---</option>
            {
            this.state.CityNames &&
            this.state.CityNames.CityName.map((h, i) => 
            (<option key={i} value={h.CityName}>{h.CityDescription}</option>))
            }
</select>