React error message missing

Question

I have a very simple React case where I have an error in the render function and nothing gets logged when the state gets updated to contain a bad value.

The error is that after the state is updated to contain a 'stuff' value that is not an array, which means that calling join(", ") on the 'stuff' value should fail, but nothing happens. React only keeps the data previously set in the getInitialState-function.

Am I doing something wrong here to loose errors messages or is this just how React works?

var someComp = React.createClass({

    getInitialState: function () {
        return {persons: [
            {name: "Jane", stuff: ["a", "b"]},
            {name: "Jim", stuff: ["c", "d"]}
        ]}
    },

    componentDidMount: function () {
        superagent.get('/api/tags')
            .end(function (res) {

                // The res.body contains a stuff-value that is not an array.
                this.setState({persons: res.body});
            }.bind(this));
    },

    render: function () {
        return R.table({}, [
            R.thead({},
                R.tr({}, [
                    R.th({}, "Name"),
                    R.th({}, "List of stuff")
                ])),
            R.tbody({},
                this.state.persons.map(function (person) {
                    return R.tr({}, [
                        R.td({}, person.name),
                        // If person.stuff is not an array, then no error is logged..!
                        R.td({}, person.stuff.join(", "))]);
                }))
        ])
    }
});

Can you please include the code where setState is being called? You would definitely get an error there, so most likely the state isn't being updated in the way you believe it is. — Brigand
– Brigand, Commented Oct 12, 2014 at 20:16
You should check out JSX, it'd make your render method a bit easier to read :) facebook.github.io/react/docs/jsx-in-depth.html — Andrew Rasmussen
– Andrew Rasmussen, Commented Oct 15, 2014 at 2:21
To use JSX or not is a matter of taste in my opinion. I prefer to only keep JavaScript in my JavaScript. — Odinodin
– Odinodin, Commented Oct 16, 2014 at 21:00

Bonnie · Accepted Answer · 2014-10-15 12:51:04Z

1

In my experience with React, it logs much more useful error messages if you build things step-by-step. Do that R.td({}, person.stuff.join(", "))] before the return statement, then use that result later on. If person.stuff isn't an array you'll get a better error message then.

More to the point, why do you want React to throw an error? If it's for development purposes, there are easier ways to check than waiting for error messages from React. Otherwise, shouldn't you be including a check to see if person.stuff is an array before attempting to use it as one?

answered Oct 15, 2014 at 12:51

Bonnie

1959 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React error message missing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related