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

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.

 this.handleCities(e)}>
    {Cities.cities && Cities.cities.map((e, key) => {
    return {e.Value};
 })}