Uncaught TypeError: s.map is not a function in ReactJs

Question

I'm trying to use ReactTable using the examples, this is the code for this:

class UsersTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    };    

    render() {                
        return (
            <div>
                <ReactTable
                    data={this.state.data}
                    columns={[
                        {
                            Header: "ID",
                            accessor: "id"
                        },
                        {
                            Header: "Name",
                            accessor: "name"
                        }
                    ]}
                    onFetchData={(state, instance) => {
                        let request = new XMLHttpRequest();
                        request.open("GET", '/get/roles', true);
                        request.send();
                        request.onload = function() {
                            if (request.status === 200) {
                                let response = JSON.parse(request.responseText);
                                let responseInfo = JSON.stringify(response);

                                this.setState({
                                    data: responseInfo
                                })
                            }
                        }.bind(this);
                    }}
                    defaultPageSize={5}
                    className="-striped -highlight"
                    manual
                />
            </div>
        );
    }
}

My GET call gets a Json that is saved in setState :

[{"id":4732298045947904,"name":"ROLE_EXECUTIVE"},{"id":5207287069147136,"name":"ROLE_ADMIN"},{"id":5858197952790528,"name":"ROLE_PLAYER"},{"id":6333186975989760,"name":"ROLE_USER"},{"id":6561885394567168,"name":"ROLE_TAKER"}]

But when I run the browser the table is not printing any row, but I can not find what the problem is:

Uncaught TypeError: s.map is not a function
    at t.value (react-table.js:6)
    at t.value (react-table.js:6)
    at p.updateComponent (react-dom.min.js:13)
    at p.receiveComponent (react-dom.min.js:13)
    ...

I would suggest checking all your scripts, cross origin policies, etc. — Colin, Nov 15 '17 at 19:19

Steve Holgado · Accepted Answer · 2017-11-15T19:33:43.050

You are setting data in your state to a string here:

...

let responseInfo = JSON.stringify(response)

this.setState({
  data: responseInfo
})

...

...but ReactTable is expecting an array.

Strings don’t have a map method, which is most likely why you are getting the error.

Perhaps use response instead, provided it is an array:

...

let response = JSON.parse(request.responseText)

this.setState({
  data: response
})

...

Uncaught TypeError: s.map is not a function in ReactJs

1 Answers1

Linked