locked
Map() not a funtion when calling MVC end point using react RRS feed

  • Question

  • User-1138198114 posted

    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.

    Thursday, February 21, 2019 10:56 AM

Answers

  • User-1138198114 posted

    Thank you for your time. Sorry got this answer from Stack Over flow. 

    https://stackoverflow.com/questions/54805346/map-not-a-funtion-when-calling-mvc-end-point-using-react/54805521?noredirect=1#comment96389700_54805521

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 21, 2019 12:24 PM

All replies

  • User-1038772411 posted

    Use or replace <tbody>

    <tbody>
        {this.state.map(createRoomRow, this)}
    </tbody>

    Or 

    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 createRoomRow = this.state.rooms.map(item => {
            return (
                <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{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;

    Thursday, February 21, 2019 12:04 PM
  • User-1138198114 posted

    Thank you for your time. Sorry got this answer from Stack Over flow. 

    https://stackoverflow.com/questions/54805346/map-not-a-funtion-when-calling-mvc-end-point-using-react/54805521?noredirect=1#comment96389700_54805521

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 21, 2019 12:24 PM
  • User-474980206 posted

    your bug was stated is not an array. it s/b:

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

    also your are using a bad tutorial to learn react. componentWillMount is deprecated and should not be used. see:

        https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

    you also should not use createClass() as its also deprecated, (replaced by support of es6 classes).

       https://reactjs.org/blog/2017/04/07/react-v15.5.0.html

    also if you are learning now, you should use the context api, hooks, and avoid classes. 

        https://reactjs.org/docs/hooks-state.html

    Thursday, February 21, 2019 4:50 PM