Reactjs Multiple Dropdown

If you create a small component for your dropdowns, like so:

import React, { Component } from 'react';

class SelectOption extends Component {
    render() {
        return (
            <option value={this.props.dataItem.key}>{this.props.dataItem.val}</option>
        )
    }
}

class SimpleDropdown extends Component {

    render() {

        let options = [];

        if (this.props.selectableData) {
            const selectableData = this.props.selectableData;
            options = selectableData.map((dataItem) =>
                <SelectOption key={'option_' + dataItem.key} dataItem={dataItem} />
            );
        }

        return (
            <div>
                <select onChange={this.props.handleInputChange} name={this.props.name} >
                    {options}
                </select>
            </div>
        )
    }
}

export default SimpleDropdown;

You can use it in your parent component, something like this...

import React, { Component } from 'react';

import SimpleDropdown from './common/SimpleDropdown';


class Parentextends Component {

    componentDidMount() {
        // here you handle your ajax call or calls, depending on what you choose to go with
    }

    handleInputChange = (e) => {

        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }


    render() {

        const ajaxResultFirst = ajaxResult.First;
        const ajaxResultSecond = ajaxResult.Second;
        const ajaxResultThird = ajaxResult.Third;
        const ajaxResultFourth = ajaxResult.Fourth;

        return (
            <section className="form">

                    <SimpleDropdown
                        name="FirstDropdown"
                        selectableData={ajaxResultFirst}
                        handleInputChange={this.handleInputChange}
                    />
                    <SimpleDropdown
                        name="SecondDropdown"
                        selectableData={ajaxResultSecond}
                        handleInputChange={this.handleInputChange}
                    />
                    <SimpleDropdown
                        name="ThirdDropdown"
                        selectableData={ajaxResultThird}
                        handleInputChange={this.handleInputChange}
                    />
                    <SimpleDropdown
                        name="FourthDropdown"
                        selectableData={ajaxResultFourth}
                        handleInputChange={this.handleInputChange}
                    />

            </section>
        );
    }
};

export default Parent;

Something like this should work. But I still recommend using a different plugin than jquery for making ajax requests, my first choice is axios https://github.com/mzabriskie/axios.