ReactJS dropdown list example that gets data from a AJAX call with an on change event

dropdown.change.jsx

var MyParentChange = React.createClass({

    getInitialState: function() {
        return {
            data: [], value: {}, showOutput: false
        }
    },

    componentDidMount: function() {
        $.get(this.props.source, function(result) {
            this.setState({
                data: result
            });
        }.bind(this));
    },

    render: function() {
        return (
            <div onChange={this.changeHandler}>
                <MySelectChange data={this.state.data}  />
                { this.state.showOutput ? <MyOutputChange item={this.state.value}/> : null }
            </div>
        )
    },

    changeHandler: function(childComponent) {
        this.state.data.forEach(function(item) {
            if (parseInt(item.id) === parseInt(childComponent.target.value)) {
                this.setState({ showOutput: item.id > 0 });
                this.setState({ value : item});
            }
        }.bind(this));
    }

});


var MyOutputChange = React.createClass({
    
    render: function() {
        return (<div>
                    <h3>Output</h3>
                    <p>Id: <b>{this.props.item.id}</b> Value: <b>{this.props.item.value}</b></p>
                </div>)
    }

});


var MySelectChange = React.createClass({

    render: function() {
        var mySelectOptions = function(result) {
            return <MySelectOptionsChange
                        key={result.id} 
                        data={result} />
            };
        return (
                <select 
                    className="form-control">
                    {this.props.data.map(mySelectOptions)}
                </select>
            )
    }
});

var MySelectOptionsChange = React.createClass({
    render: function() {
        return <option value={this.props.data.id}>{this.props.data.value}</option>
    }
});


React.render(
    <MyParentChange source="/ajax/lookup" />, 
    document.getElementById('dropdownchange')
);

index.html

<div class="row">
    <div class="col-md-4">

        <p>Drop down from ajax wth change event</p>
        <div id="dropdownchange"></div>

    </div>
</div>


<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>

<script type="text/jsx" src="Dropdown.Ajax.Change.jsx"></script>

https://reactjs.co This is the official free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore. ReactJS For Dummies: Why & How to Learn React Redux, the Right Way.

I'm sorry I'm new with React, I create a php that create a json from mysql data but if I use the file php give an error on map, instead I create a file .json with the same data it works, where I wrong?

/**
 * Created by Mattia on 22/09/16.
 */
var UserGist = React.createClass({

    getInitialState: function() {
        return {
            data: [], value: {}, showOutput: false
        }
    },

    componentDidMount: function() {
        $.get(this.props.source, function(result) {
            this.setState({
                data: result
            });
        }.bind(this));
    },

    render: function() {
        return (
            <div onChange={this.changeHandler}>
                <MySelectChange data={this.state.data}  />
                { this.state.showOutput ? <MyOutputChange item={this.state.value}/> : null }
            </div>
        )
    },

    changeHandler: function(childComponent) {
        this.state.data.forEach(function(item) {
            if (parseInt(item.catID) === parseInt(childComponent.target.value)) {
                this.setState({ showOutput: item.catID > 0 });
                this.setState({ value : item});
            }
        }.bind(this));
    }

});

var MyOutputChange = React.createClass({

    render: function() {
        return (<div>
            <h3>Output</h3>
            <p>Id: <b>{this.props.item.catID}</b> Value: <b>{this.props.item.catName}</b></p>
        </div>)
    }

});


var MySelectChange = React.createClass({

    render: function() {
        var mySelectOptions = function(result) {
            return <MySelectOptionsChange
                key={result.catID}
                data={result} />
        };
        return (
            <select
                className="form-control">
                {this.props.data.map(mySelectOptions)}
            </select>
        )
    }
});

var MySelectOptionsChange = React.createClass({
    render: function() {
        return <option value={this.props.data.catID}>{this.props.data.catName}</option>
    }
});

// Using json file
React.render(
    <UserGist source="http://mattiabuffetti.com/Clienti/producer/ASLibrary/react/package.json" />, document.getElementById('container')
);

//Using Php file
React.render(
    <UserGist source="http://mattiabuffetti.com/Clienti/producer/schede-fornitori-json.php" />, document.getElementById('container')
);

Where is the PHP code @Imbufetti?

I'm writing code in ReactJS.. I have 2 collections in my mongoDb named states and city. I want to create states and city dropdown lists so that if I select Any state then the if I click on city dropdown list, it shoud show only cities those are related to selected state.. Plz post ReactJs code for this..
Thanks