reactjs with axios “Cannot read property 'map' of undefined`”

Question

I was messing around using React, and I get this error while reading json from a local file localhost. I have checked other questions but have not gotten any result. i have install react dev tools from chrome app store and check error so i do not get cross origin error.

Here's the code:

class Content extends React.Component {
    constructor(){
        super();
        this.state={
            json: {
                categories: []          
            }
        };
    }
    componentWillMount(){

        var _this = this;
        var loc = window.location.pathname;
        var dir = loc.substring(0, loc.lastIndexOf('/'));

        this.serverRequest = 
            axios
            .get(dir+"/data.json")
            .then(function(result) {    
            // we got it!
                _this.setState({
                    json:result 
                });
            });
    }
    render() {
        var title =  <a>{this.state.json.title}</a>;
        return (
            <div>
                <h2>Content</h2>
                <h3>{title}</h3>

                {this.state.json.categories.map(function(item) {
                    return (
                        <div key={item.categoryID} className="category">
                            <div> {item.categoryName} </div>  
                            <div> {item.categoryDescridivtion} </div> 
                            <div> {item.videosCount} </div> 
                        </div>
                    );
                })}
            </div>
        );
    }
}

Here's the JSON:

{
    "categories": [{
        "categoryID": "294",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Apps and Side Dishes (Laura)",
        "categoryDescription": "Learn to make amazing appetizers and side dishes with Laura in the Kitchen.",
        "videosCount": "101",
        "forumCategoryID": "163"
    }, {
        "categoryID": "285",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes",
        "categoryDescription": "Side dish recipes for salads, vegetables, sauces with Hilah cooking.",
        "videosCount": "38",
        "forumCategoryID": "163"
    }, {
        "categoryID": "337",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes (bt)",
        "categoryDescription": "Side dish recipes with Byron Talbott.",
        "videosCount": "5",
        "forumCategoryID": "163"
    }, {
        "categoryID": "301",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes for Barbecue",
        "categoryDescription": "Barbecue side dish recipes done on the grill by the BBQ Pit Boys!",
        "videosCount": "43",
        "forumCategoryID": "163"
    }, {
        "categoryID": "297",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Soups and Salads (Laura)",
        "categoryDescription": "Looking for the perfect recipe to start your meal? Or are you looking to eat something on the lighter side? These are sure to have you covered!",
        "videosCount": "70",
        "forumCategoryID": "163"
    }],

    "title": "Title page"
}

here is the ouput from debug console regarding result from axios debug console:

Answer 1

Your screenshot from the console makes it clear why it isn't working: result doesn't have a categories property. It's result.data that has the categories , axios wraps the result in an envelope of sorts giving you information about the request ( config , headers , status , etc.) and provides the actual data as data . So:

this.serverRequest = 
    axios
    .get(dir+"/data.json")
    .then(function(result) {    
    // we got it!
        _this.setState({
            json:result.data   // ***
        });
    });

Example:

 class Content extends React.Component { constructor(){ super(); this.state={ json: { categories: [] } }; } componentWillMount(){ var _this = this; var loc = window.location.pathname; var dir = loc.substring(0, loc.lastIndexOf('/')); this.serverRequest = axios .get(dir+"/data.json") .then(function(result) { // we got it! console.log(result); // So you can check it against your image _this.setState({ json:result.data }); }); } render() { var title = <a>{this.state.json.title}</a>; return ( <div> <h2>Content</h2> <h3>{title}</h3> {this.state.json.categories.map(function(item) { return ( <div key={item.categoryID} className="category"> <div> {item.categoryName} </div> <div> {item.categoryDescridivtion} </div> <div> {item.videosCount} </div> </div> ); })} </div> ); } } const data = { "config": { "some": "stuff" }, data: { "categories": [{ "categoryID": "294", "parentID": "304", "subjectID": "7", "categoryName": "Apps and Side Dishes (Laura)", "categoryDescription": "Learn to make amazing appetizers and side dishes with Laura in the Kitchen.", "videosCount": "101", "forumCategoryID": "163" }, { "categoryID": "285", "parentID": "304", "subjectID": "7", "categoryName": "Side Dishes", "categoryDescription": "Side dish recipes for salads, vegetables, sauces with Hilah cooking.", "videosCount": "38", "forumCategoryID": "163" }, { "categoryID": "337", "parentID": "304", "subjectID": "7", "categoryName": "Side Dishes (bt)", "categoryDescription": "Side dish recipes with Byron Talbott.", "videosCount": "5", "forumCategoryID": "163" }, { "categoryID": "301", "parentID": "304", "subjectID": "7", "categoryName": "Side Dishes for Barbecue", "categoryDescription": "Barbecue side dish recipes done on the grill by the BBQ Pit Boys!", "videosCount": "43", "forumCategoryID": "163" }, { "categoryID": "297", "parentID": "304", "subjectID": "7", "categoryName": "Soups and Salads (Laura)", "categoryDescription": "Looking for the perfect recipe to start your meal? Or are you looking to eat something on the lighter side? These are sure to have you covered!", "videosCount": "70", "forumCategoryID": "163" }], "title": "Title page" }, "headers": { "some": "stuff" } }; const axios = { get() { return new Promise(resolve => { setTimeout(resolve, 100, data); }); } }; ReactDOM.render( <Content />, document.getElementById("react") ); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>