Uncaught TypeError: Cannot read property 'map' of undefined with React

Question

I have implemented a little test application in React to fetch data via AJAX, but it is not working as inteded, hence i get following error:

Uncaught TypeError: Cannot read property 'map' of undefinedInline JSX script

Code is as following:

<div id="content"></div>
<script type="text/jsx">   
var Bodypart = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.name}
            </div>
        )
    }
})    

var BodypartList = React.createClass({
    getInitialState: function() {
      return {data: []};
    },
    componentWillMount: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({bodyparts: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    render: function() {
        var bodypartItems = this.state.bodyparts.map(function (bodypart) {
            return (
                <Bodypart 
                    name={bodypart.name} 
                />
            );
        });
        return (
        <div>
            {bodypartItems}
        </div>
        );
    }
});    

React.render(
    <BodypartList url="/api/bodyparts/" />,
    document.getElementById('content')
);
</script>

The response from /api/bodyparts/:

{
    "bodyparts": [
        {
            "id": 1, 
            "name": "Face"
        }, 
        {
            "id": 3, 
            "name": "Mouth"
        }, 
        {
            "id": 2, 
            "name": "Nose"
        }
    ]
}

nilgun · Accepted Answer · 2015-02-20 13:33:45Z

7

At initial render this.state.bodypartsis undefined hence the error you got.

you should return

{bodyparts:[]}

from getInitialState.

Also in your success callback you should set state like:

this.setState(data);

because your api already returns bodyparts as part of its result.

edited Feb 20, 2015 at 13:33

answered Feb 20, 2015 at 13:27

nilgun

10.6k4 gold badges48 silver badges57 bronze badges

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

2 Comments

JavaCake Over a year ago

Lack of coffee creates significant mistakes.

Gerard Banasig Over a year ago

Which is better? creating an initial state on getInitialState {bodyparts:[]} or making an explicit conditional check when the this.state.bodyparts is set? like this.

var bodypartItems = this.state.bodyparts && this.state.bodyparts.map(function (bodypart) {             return (                 <Bodypart                      name={bodypart.name}                  />             );         });

Joe Fitter · Accepted Answer · 2015-02-20 13:27:19Z

0

this.state.bodyparts is undefined. the component is rendering before the ajax has completed. Try setting an initial state

answered Feb 20, 2015 at 13:27

Joe Fitter

1,3097 silver badges11 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property 'map' of undefined with React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related