How to render JSON response as dropdown list in React

Question

I'm currently trying to take some JSON data that I've received from an API and put that into a dropdown in a very simple React application.

This is my DropDown component thus far:

import React from 'react';

var values;

fetch('http://localhost:8080/values')
    .then(function(res) {
        return res.json();
    }).then(function(json) {
        values = json;
        console.log(values);
    });

class DropDown extends React.Component {
    render(){
        return <div className="drop-down">
            <p>I would like to render a dropdown here from the values object</p>
            </div>;
    }
}

export default DropDown;

Any my JSON looks like this:

{  
   "values":[  
      {  
         "id":0,
         "name":"Jeff"
      },
      {  
         "id":1,
         "name":"Joe"
      },
      {  
         "id":2,
         "name":"John"
      },
      {  
         "id":3,
         "name":"Billy"
      },
      {  
         "id":4,
         "name":"Horace"
      },
      {  
         "id":5,
         "name":"Greg"
      }
   ]
}

I'd like the dropdown options to correspond to the 'name' of each element, and the 'id' to be used as an element identifier when an event is triggered by selecting an option. Any advice on getting this data into a dropdown which responds to user input would be greatly appreciated.

Answer 1

Call the API in componentDidMount lifecycle function of your React component and then save the response in state and then render the Select dropdown

import React from 'react';

class DropDown extends React.Component {
    state = {
        values: []
    }
    componentDidMount() {
       fetch('http://localhost:8080/values')
        .then(function(res) {
            return res.json();
        }).then((json)=> {
            this.setState({
               values: json
            })
        });
    }
    render(){
        return <div className="drop-down">
            <p>I would like to render a dropdown here from the values object</p>
              <select>{
                 this.state.values.map((obj) => {
                     return <option value={obj.id}>{obj.name}</option>
                 })
              }</select>
            </div>;
    }
}

export default DropDown;

Answer 2

You could do something like this:

import React from 'react';

var values;

class DropDown extends React.Component {

    constructor(){
        super();
        this.state = {
            options: []
        }  
    }

    componentDidMount(){
        this.fetchOptions()
    }

    fetchOptions(){
        fetch('http://localhost:8080/values')
            .then((res) => {
                return res.json();
            }).then((json) => {
                values = json;
                this.setState({options: values.values})
                console.log(values);
            });
    }
    render(){
        return <div className="drop-down">
            <select>
                { this.state.options.map((option, key) => <option key={key} >{option}</option>) }
            </select>
            </div>;
    }
}

export default DropDown;

Basically you are initializing state and setting options to null.

You are then fetching your options when the component mounts in the browser. These values are set to your state with this.setState().

Note: It is important to make any API calls in componentDidMount() and not componentWillMount(). If you call it in componentWillMount() the request will be made twice.

Then you render these options by mapping them in your render function