Map() not a funtion when calling MVC end point usi

Question

Hi I am learning react and trying to call an MVC endpoint from react and display the result in a table. The MVC endpoint returns a json data like the below format,

{  
"Rooms":[  
  {  
     "Types":[  
        {  
           "Type":"Apple",
           "Available":"3",
           "Total":"31"
        }
     ],
     "id":"R1",
     "
  },
  {  
     "Types":[  
        {  
           "Type":"Orange",
           "Available":"4",
           "Total":"40"
        }
     ],
     "id":"R2",         
  },

  {  
     "Types":[  
        {  
           "Type":"Apple",
           "Available":"25",
           "Total":"30"
        },
        {  
           "Type":"Mango",
           "Available":"23",
           "Total":"36"
        }
     ],
     "id":"R3",         
  },
  {  
     "Types":[  
        {  
           "Type":"Apple",
           "Available":"23",
           "Total":"36"
        },
        {  
           "Type":"Mango",
           "Available":"23",
           "Total":"36"
        },
        {  
           "Type":"Orange",
           "Available":"23",
           "Total":"36"
        }
     ],
     "id":"R4",

   }

]
}

I have come up with my limited knowledge and googling something like the below,

"use strict";

var React = require('react');


var List= React.createClass({

// getInitialState: function(){
//     return({
//         rooms: []
//     });
// },
state: {
    rooms: []
},

componentWillMount: function() {
    fetch('https://dummyMVCendpoint.com/json')
    .then(res => res.json())        
    .then(Rooms => {
        this.setState({rooms: Rooms})
    })        
  },
render(){
    var createRoomRow = function(rooms) {
        return (
            <tr key={rooms.id}>
                <td>{rooms.id}</td>
                <td>{rooms.Types}</td>
            </tr>
        );
    };
    return (          


         <div>

         //<p>{JSON.stringify(this.state) }</p>


         {<table className="table"> 
         <thead>
             <th>RoomID</th>
             <th>Types</th>
         </thead>
         <tbody>
            {this.state.map(createRoomRow, this)}
         </tbody>
         </table>             
     </div>
    );      
   }
});

module.exports=List;

Now I want to display in the table the ID,available/total Types. I do understand the above jsx does not do exactly what I want.

But I am also getting an error,Uncaught TypeError: Cannot read property 'map' of null. Thanks in advance.

Answer 1

Here's few suggestions:

1. Check if you

    fetch('https://dummyMVCendpoint.com/json')
    .then(res => res.json())        
    .then(Rooms => {
    console.log(Rooms) // make sure you are getting the right data
        this.setState({rooms: Rooms})
    }) 

2. Replace this

{this.state.map(createRoomRow, this)}

with

{createRoomRow}

and then

var createRoomRow = this.state.rooms.map(rooms => {
        return (
            <tr key={rooms.id}>
                <td>{rooms.id}</td>
                <td>{rooms.Types}</td>
            </tr>
        );
    });

3. Use getInitialState Altogether

"use strict";

var React = require('react');


var List= React.createClass({

componentWillMount: function() {
    fetch('https://dummyMVCendpoint.com/json')
    .then(res => res.json())        
    .then(Rooms => {
        this.setState({rooms: Rooms})
    })        
  },
getInitialState: function(){
    return {
      rooms: []
    }
  },
  render: function() {
    var renderExtraRows = (dataList) => dataList.map(list => {
      return (
        <div>
          <span>{list.Type}</span>
          <span>{list. Total}</span>
        </div>        
      );
    });
    var createRoomRow = this.state.rooms.map(item => {
        return (
            <tr key={item.id}>
                <td>{item.id}</td>
                <td>{renderExtraRows(item.Types)}</td>
            </tr>
        );
    });
    return (          


         <div>

         {<table className="table"> 
           <thead>
               <th>RoomID</th>
               <th>Types</th>
           </thead>
           <tbody>
              {createRoomRow}
           </tbody>
           </table>}            
     </div>
    );      
   }

});

module.exports=List;