Подача данных Ajax в React

Я все еще относительно новичок в React. Медленно я пытаюсь интегрировать реакцию в качестве внешнего интерфейса для моего веб-сайта MVC, однако, похоже, я застрял на переносе вызова AJAX в свою таблицу EmployeeGrid. Для моего индекса я делаю следующее

<Route exact path='/' component = {Intro} />
<Route exact path='/Home/GSC' component = {GSC} />

Интро работает нормально, а GSC работает частично. Данные не отображаются в таблице. Это то, что у меня есть в моем GSC.js

import React from 'react';

function EmployeeGridRow() {
    <tr>
        <td>{this.props.item.AccountID}</td>
        <td>{this.props.item.AccountName}</td>
        <td>{this.props.item.SenderName}</td>
        <td>{this.props.item.SenderEmail}</td>
        <td>{this.props.item.ITEmailReceipients}</td>
        <td>{this.props.item.Active}</td>
    </tr>;
}

class EmployeeGridTable extends React.Component {
    getInitialState() {
        return {
            items: []
        };
    }

    componentDidMount() {
        //Fetch data via ajax
        $.get(this.props.dataUrl, function (data) {
            if (this.isMounted()) {
                this.setState({
                    items: data
                });
            }
        }.bind(this));
    }
    
    render() {
        var rows = [];
        this.state.items.forEach(function (item) {
            rows.push(
                <EmployeeGridRow key = {item.AccountID} item = {item} />);
        });
        return (
            <table className = "table table-bordered table-responsive">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Sender</th>
                        <th>Email</th>
                        <th>IT Support</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>);
    }
}

export default EmployeeGridTable(dataUrl = "/Home/GetEmployeeData");

Какие-либо предложения?

Обновлять

Я думаю, что, может быть, я плохо объяснил. Следующее ниже работает, но только если я вставлю его в .cshtml. Есть ли способ преобразовать это в файл JS или JSX?

<script type = "text/babel">
@* Here we will create 2 react component 1 for rows and another for table  *@
var EmployeeGridRow = React.createClass({
render : function(){
return (
<tr>
    <td>{this.props.item.AccountID}</td>
    <td>{this.props.item.AccountName}</td>
    <td>{this.props.item.SenderName}</td>
    <td>{this.props.item.SenderEmail}</td>
    <td>{this.props.item.ITEmailReceipients}</td>
    <td>{this.props.item.Active}</td>
</tr>
);
}
});

var EmployeeGridTable = React.createClass({
getInitialState: function(){
return {
items:[]
}
},
componentDidMount:function(){
@* Fetch data via ajax *@
$.get(this.props.dataUrl, function(data){
if (this.isMounted()){
this.setState({
items: data
});
}
}.bind(this));
},
render : function(){
var rows = [];
this.state.items.forEach(function(item){
rows.push(
<EmployeeGridRow key = {item.AccountID} item = {item} />);
});
return (
<table className = "table table-bordered table-responsive">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Sender</th>
            <th>Email</th>
            <th>IT Support</th>
            <th>Active</th>
        </tr>
    </thead>
    <tbody>
        {rows}
    </tbody>
</table>);
}
});
ReactDOM.render(
<EmployeeGridTable dataUrl = "/Home/GetEmployeeData" />,
document.getElementById('griddata')
);