React component do not gets updated after changing the the state in componentDidMount

Question

I'm working on a react component that render a table with some data coming down from an API on the server as follows:

var ModulesTable = React.createClass({

    getInitialState: function () {
        return {
            modules: ""
        };
    },
    componentDidMount: function () {

        var get = $.get("/api/Modules/GetModules")
            .done(function (results) {

                if (results != null) {
                    var rows = results.map((module) => {

                        var statusImg;
                        if (module.IsActive)
                            statusImg = <a><i className="ti-check"></i></a>;

                        return
                        (<tr>
                            <td>{module.ModuleId}</td>
                            <td>{module.ModuleName}</td>
                            <td>{statusImg}</td>
                        </tr>);
                    }
                    );
                    this.setState({
                        modules: rows
                    });
                }
            }
                .bind(this))
            .fail(function (err) {
                alert(err);
            });

    },
    render: function () {
        return (<table className="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Used</th>
                </tr>
            </thead>
            <tbody>
                {this.state.modules}
            </tbody>
        </table>);
    }
});

ReactDOM.render(
    <ModulesTable />,
    document.getElementById("tableContainer"));

The problem is the component is not gets updated with the data returned from the API and the console show no signs of any error plus the API is working fine. I suspect that the problem with setState probably. what i'm doing wrong here?

Answer 1

this.state.modules instead of modules, see demo @ https://jsfiddle.net/wv3yopo0/2674/

Answer 2

I've found a solution by getting rid of map function and use the regular for loop fixed my problem as following :

componentDidMount: function () {

        var get = $.get("/api/Modules/GetModules")
            .done(function (results) {
                if (results != null) {

                    var rows = [];
                    for (var i = 0; i < results.length; i++) {
                        var module = results[i];

                        if (module.IsActive) {

                            rows.push(
                                <tr>
                                    <td>{module.ModuleId}</td>
                                    <td>{module.ModuleName}</td>
                                    <td><a><i className="ti-check"></i></a></td>
                                </tr>
                            );
                        }

                        else {
                            rows.push(
                                <tr>
                                    <td>{module.ModuleId}</td>
                                    <td>{module.ModuleName}</td>
                                    <td><a><i className="ti-close"></i></a></td>
                                </tr>
                            );
                        }

                    }

                    this.setState({
                        modules: rows
                    });

                    console.log(rows);
                }
            }.bind(this))
            .fail(function (err) {
                alert(err);
            });
    }

Answer 3

this does not work with jQuery xhr callbacks. Just try this instead

    const self = this;
    var get = $.get("/api/Modules/GetModules")
        .done(function (results) {

            if (results != null) {
                var rows = results.map((module) => {

                    var statusImg;
                    if (module.IsActive)
                        statusImg = <a><i className="ti-check"></i></a>;

                    return
                    (<tr>
                        <td>{module.ModuleId}</td>
                        <td>{module.ModuleName}</td>
                        <td>{statusImg}</td>
                    </tr>);
                }
                );
                self.setState({
                    modules: rows
                });
            }
        }
            .bind(this))
        .fail(function (err) {
            alert(err);
        });