timeentry_timesheet.jsx

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

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

var TimeEntry = React.createClass({
    getInitialState: function () {
        return {
            clientData: [],
            projectData: [],
            contentState: "1"
        };
    },
    componentDidMount: function () {
        $.ajax({
            url: this.props.urlClients,
            dataType: 'json',
            cache: true,
            success: function(data) {
                this.setState({clientData: data});
                $.ajax({
                    url: this.props.urlProjects + data[0].clientId,
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        this.setState({projectData: data});
                    }.bind(this),
                    error: function(data, status, err) {
                        console.log(this.props.url, status, err.toString());
                    }.bind(this)
                });
            }.bind(this),
            error: function(data, status, err) {
                console.log(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    ClientChange: function(event) {
        this.setState({contentState: event.target.value});
        $.ajax({
            url: this.props.urlProjects + event.target.value,
            dataType: 'json',
            cache: false,
            success: function(data) {
                this.setState({projectData: data});
            }.bind(this),
            error: function(data, status, err) {
                console.log(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render: function() {
        var clients = this.state.clientData.map(function (client) {
            return (
                    <ClientList key={client.clientId} data={client} />
                );
        });
        var projects = this.state.projectData.map(function (project) {
            return (
                    <ProjectList key={project.projectId} data={project} />
                );
        });

        return (
            <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label htmlFor="exampleInputPassword1">Clients</label>
                    <select className="form-control" onChange={this.ClientChange} name="client" ref="client" required>
                        {clients}
                    </select>
                </div>
                <div className="form-group">
                    <label htmlFor="exampleInputPassword1">Projects</label>
                    <select className="form-control" name="project" ref="project" required>
                        {projects}
                    </select>
                </div>

            </form>
        )
    }
});

ReactDOM.render(
    <TimeEntry urlClients='/timesheet/getclients' urlProjects='/timesheet/getprojects/' />,
    document.getElementById('timeentry-body')
);