Error in map function reactjs

Question

I am having an error with the map function. I dont know what might be the reason but it says this.state.rooms.map is not a function. I have fetched the data from api and pushed into an empty list . The list is successfully updated with the contents but could not apply map function on it.

Here's my code

import React from 'react';
import ReactDOM from 'react-dom';


export default class RoomList extends React.Component{
    constructor(props){
        super(props);
        this.state = { rooms: [] }
    }

    componentDidMount(){
        console.log('componentDidMount');
        this.loadRoomFromServer();
    }

    loadRoomFromServer(){
        $.ajax({
            url:'/api/v1/rental/',
            dataType:'json',
            success: (data) => {
                this.setState({rooms: data});
              },
              error: (xhr, status, err) => {
                console.error(url, status, err.toString());
              }
            });
    }

    render(){
        console.log('rooms',this.state.rooms);
        let listOfRoom = this.state.rooms.map((room)=>{
            return(
                    <Room key={room.id} name={room.listingName} price={room.price} number={room.room} />
                )
        });
        return(
                <div className="container-fluid">
                    <div className="row">
                            { listOfRoom }
                    </div>
                </div>
            )
    }
}

class Room extends React.Component{
    render(){
        return(
                <div className="col-md-4">
                    <h2>{this.props.name}</h2>
                    <p>{this.props.price}</p>
                    <p>{this.props.number}</p>
                </div>
            )
    }
}

what i get on the console is

room []

componentDidMount

room Object {amenities: "Kitchen, Cable", city: "city", email: "[email protected]", listingName: "tushant", ownerName: "tushant"…}

Uncaught TypeError: this.state.rooms.map is not a function

could you add to your question result of console.log(Array.isArray(this.state.rooms)) ? Because seems that this.state.rooms is Object not Array — Oleksandr T.
– Oleksandr T., Commented Feb 26, 2016 at 11:51
So the Object {amenities: "Kitchen, ...} is the result of console.log(this.state.rooms)? Then here's the problem, this.state.rooms is an Object (representing a single room I guess), not an Array. If you only expect a single room from the API then either this.setState({rooms: [ data ]}); (replace the current array) or this.setState({rooms: this.state.rooms.puch(data)}); (to append the room), or fix your API to return arrays. — pawel
– pawel, Commented Feb 26, 2016 at 11:53
yes object is the result of this.state.rooms . I want to fetch all the room from the API but i could only fetch one room. I did this.setState({rooms:[data]}). What should be done inorder to fetch all the room from an api? — Tushant
– Tushant, Commented Feb 26, 2016 at 12:08
@Tushant maybe URL for ajax should looks like this /api/v1/rentals ? But we can't answer on this question because we have not seen your backend API — Oleksandr T.
– Oleksandr T., Commented Feb 26, 2016 at 12:11
my bad i forgot to change that . I was tweaking my code. Thanks. — Tushant
– Tushant, Commented Feb 26, 2016 at 12:13

Nour Sammour · Accepted Answer · 2016-02-26 12:47:53Z

2

as @sfletche mentioned map function for arrays only. change your success callback to

success: (data) => {
    this.setState({rooms: data.objects});
 },
 error: (xhr, status, err) => {
    console.error(url, status, err.toString());
  }
});

edited Feb 26, 2016 at 12:47

answered Feb 26, 2016 at 12:05

Nour Sammour

2,8521 gold badge23 silver badges20 bronze badges

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

9 Comments

Tushant Over a year ago

This way i could fetch only 1 room from an api as i want to fetch all the room from an api.

Nour Sammour Over a year ago

the issue is from the api (backend) not from frontend you need to make sure you are sending array of rooms, if you can post your API response

Tushant Over a year ago

yes now i get such imgur.com/VZEkPMZ . I am getting all the room now. I forgot to change my url.

Tushant Over a year ago

but nothing is rendered in my template.

Nour Sammour Over a year ago

if you can post your response here, and console.log in success callback

|

Tharif · Accepted Answer · 2016-02-26 12:03:02Z

2

There is no map function for objects, only arrays.

Your second output of rooms shows the answer

room Object {amenities: "Kitchen, Cable", city: "city", email: 
"[email protected]", listingName: "tushant", ownerName: "tushant"…}

rooms is now an object and the map function is specific to arrays.

edited Feb 26, 2016 at 12:03

Tharif

14k10 gold badges57 silver badges78 bronze badges

answered Feb 26, 2016 at 11:58

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

Collectives™ on Stack Overflow

Error in map function reactjs

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related