React JS - Uncaught TypeError: this.props.data.map is not a function

Question

I'm working with reactjs and cannot seem to prevent this error when trying to display JSON data (either from file or server):

Uncaught TypeError: this.props.data.map is not a function

I've looked at:

React code throwing “TypeError: this.props.data.map is not a function”

React.js this.props.data.map() is not a function

Neither of these has helped me fix the problem. After my page loads, I can verify that this.data.props is not undefined (and does have a value equivalent to the JSON object - can call with window.foo), so it seems like it isn't loading in time when it is called by ConversationList. How do I make sure that the map method is working on the JSON data and not an undefined variable?

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadConversationsFromServer();
    setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})

EDIT: adding sample conversations.json

Note - calling this.props.data.conversations also returns an error:

var conversationNodes = this.props.data.conversations.map...

returns the following error:

Uncaught TypeError: Cannot read property 'map' of undefined

Here is conversations.json:

{"user_has_unread_messages":false,"unread_messages_count":0,"conversations":[{"id":18768,"last_message_snippet":"Lorem ipsum","other_user_id":10193}]}

I've updated the answer. Also, some recommendations: add propTypes: { data: React.PropTypes.array } to ConversationList to verify data's type, and add a componentWillUnmount: fn() that "clearInterval" the interval in ConversationBox. — user120242, May 09 '15 at 17:47

user120242 · Accepted Answer · 2015-05-09T18:00:00.197

The .map function is only available on array.
It looks like data isn't in the format you are expecting it to be (it is {} but you are expecting []).

this.setState({data: data});

should be

this.setState({data: data.conversations});

Check what type "data" is being set to, and make sure that it is an array.

Modified code with a few recommendations (propType validation and clearInterval):

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
 // Make sure this.props.data is an array
  propTypes: {
    data: React.PropTypes.array.isRequired
  },
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data.conversations});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },

 /* Taken from 
    https://facebook.github.io/react/docs/reusable-components.html#mixins
    clears all intervals after component is unmounted
  */
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  },

  componentDidMount: function() {
    this.loadConversationsFromServer();
    this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})

score 61 · Answer 2 · edited Jul 07 '21 at 12:59

61

You need to create an array out of props.data, like so:

data = Array.from(props.data);

then will be able to use data.map() function

edited Jul 07 '21 at 12:59

Yuriy Yakym

3,616
17
30

answered Apr 17 '18 at 01:43

Vishal Seshagiri

775
8
9

1

My type was an array already e.g. typeOf was showing the right thing also length was correct but still, the error was appearing. This fixed it for me. Thanks! – user1829319 Nov 06 '19 at 02:00

score 13 · Answer 3 · answered May 16 '15 at 02:46

13

More generally, you can also convert the new data into an array and use something like concat:

var newData = this.state.data.concat([data]);  
this.setState({data: newData})

This pattern is actually used in Facebook's ToDo demo app (see the section "An Application") at https://facebook.github.io/react/.

answered May 16 '15 at 02:46

bresson

831
11
20

1

This is a neat tip/trick, but I want to note that this would mask the real problem and would not solve OP. In the case of OP this would not help, as the data would still be malformed (not what was intended). Conversation would most likely end up empty as all props would be null. I would recommend not using this tip, unless you are sure your data is in the format you want, so you don't end up with unexpected behavior when the data returned isn't what you thought it should be. – user120242 May 16 '15 at 04:37

score 11 · Answer 4 · answered Jan 21 '18 at 17:56

It happens because the component is rendered before the async data arrived, you should control before to render.

I resolved it in this way:

render() {
    let partners = this.props && this.props.partners.length > 0 ?
        this.props.partners.map(p=>
            <li className = "partners" key={p.id}>
                <img src={p.img} alt={p.name}/> {p.name} </li>
        ) : <span></span>;

    return (
        <div>
            <ul>{partners}</ul>
        </div>
    );
}

Map can not resolve when the property is null/undefined, so I did a control first

this.props && this.props.partners.length > 0 ?

score 8 · Answer 5 · answered Jan 17 '21 at 22:31

8

I had the same problem. The solution was to change the useState initial state value from string to array. In App.js, previous useState was

const [favoriteFilms, setFavoriteFilms] = useState('');

I changed it to

const [favoriteFilms, setFavoriteFilms] = useState([]);

and the component that uses those values stopped throwing error with .map function.

answered Jan 17 '21 at 22:31

BiniTutor

91
1
4

thank you! you are a brave and courageous developer – BoogaBooga Apr 27 '22 at 09:17

score 5 · Answer 6 · answered May 01 '21 at 05:00

5

Sometimes you just have to check if api call has data returned yet,

{this.props.data && (this.props.data).map(e => /* render data */)}

answered May 01 '21 at 05:00

LizardKingLK

131
4
9

score 4 · Answer 7 · answered Dec 31 '20 at 04:17

4

If you're using react hooks you have to make sure that data was initialized as an array. Here's is how it must look like:

const[data, setData] = useState([])

answered Dec 31 '20 at 04:17

Blessing

2,450
15
22

score 4 · Answer 8 · answered Feb 16 '22 at 09:42

4

Create an array from props data.

let data = Array.from(props.data)

Then you can use it like this:

{ data.map((itm, index) => {
return (<span key={index}>{itm}</span>)
}}

answered Feb 16 '22 at 09:42

Murad

1,064
16
13

score 1 · Answer 9 · answered Jun 19 '16 at 17:48

1

You don't need an array to do it.

var ItemNode = this.state.data.map(function(itemData) {
return (
   <ComponentName title={itemData.title} key={itemData.id} number={itemData.id}/>
 );
});

answered Jun 19 '16 at 17:48

CodeGuru

3,645
14
55
99

How it is different bro ? – Amar Pathak Jan 12 '18 at 20:40

score 1 · Answer 10 · edited May 23 '20 at 11:59

1

You need to convert the object into an array to use the map function:

const mad = Object.values(this.props.location.state);

where this.props.location.state is the passed object into another component.

edited May 23 '20 at 11:59

double-beep

5,031
17
33
41

answered May 23 '20 at 11:25

ISRAEL ODUGUWA

79
3

score 1 · Answer 11 · answered Nov 30 '20 at 23:56

As mentioned in the accepted answer, this error is usually caused when the API returns data in a format, say object, instead of in an array.

If no existing answer here cuts it for you, you might want to convert the data you are dealing with into an array with something like:

let madeArr = Object.entries(initialApiResponse)

The resulting madeArr with will be an array of arrays.

This works fine for me whenever I encounter this error.

score 1 · Answer 12 · edited Jan 25 '21 at 18:11

I had a similar error, but I was using Redux for state management.

My Error:

Uncaught TypeError: this.props.user.map is not a function

What Fixed My Error:

I wrapped my response data in an array. Therefore, I can then map through the array. Below is my solution.

const ProfileAction = () => dispatch => {
  dispatch({type: STARTFETCHING})
  AxiosWithAuth()
    .get(`http://localhost:3333/api/users/${id here}`)
    .then((res) => {
        // wrapping res.data in an array like below is what solved the error 
        dispatch({type: FETCHEDPROFILE, payload: [res.data]})
    }) .catch((error) => {
        dispatch({type: FAILDFETCH, error: error})
    })
 }

 export default ProfileAction

score 1 · Answer 13 · edited Jan 30 '22 at 11:20

1

You should try this:

const updateNews =  async()=>{

    const res= await  fetch('https://newsapi.org/v2/everything?q=tesla&from=2021-12-30&sortBy=publishedAt&apiKey=3453452345')
    const data =await res.json();
    setArticles(data)
}

edited Jan 30 '22 at 11:20

Elikill58

4,050
24
23
45

answered Jan 30 '22 at 07:42

Ayush negi

11
1

score 0 · Answer 14 · answered Oct 08 '21 at 03:40

0

Add this line.

var conversationNodes =this.props.data.map.length>0 && this.props.data.map(function(conversation, index){.......}

Here we are just checking the length of the array. If the length is more than 0, Then go for it.

answered Oct 08 '21 at 03:40

Mujahidul Islam

265
4
8

score 0 · Answer 15 · edited Nov 01 '21 at 05:58

0

'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination', 'PAGE_SIZE': '2',

I delete that code line in setting it to fix it

edited Nov 01 '21 at 05:58

Suraj Rao

29,388
11
94
103

answered Nov 01 '21 at 05:51

Huy Nguyen

1
2

1

Is this answer relevant to the question? – Rajeesh Madambat Nov 01 '21 at 06:08
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 01 '21 at 06:08

Akash Agrawal · Answer 16 · 2022-12-20T10:35:34.907

0

You might need to convert the objects into an array to use the map function since you are getting the JSON data in array form, I changed it to:

const [data, setData] = useState([]);

from:

const [data, setData] = useState(0);

I Hope, it might be helpful for you. Thanks

edited Dec 20 '22 at 10:35

answered Dec 20 '22 at 10:33

Akash Agrawal

1
1

score -2 · Answer 17 · answered Jul 13 '18 at 17:13

-2

try componentDidMount() lifecycle when fetching data

answered Jul 13 '18 at 17:13

Arif Ramadhani

9

6

Also, provide some explanation, why this works and how? – Mittal Patel Jul 13 '18 at 17:42

React JS - Uncaught TypeError: this.props.data.map is not a function

17 Answers17

Linked

Related