Cannot read property map of undefined

Question

I m following the reactjs tutorial  and I keep running into an issue when passing the value from the state of one component into another component   The error Cannot read property  map  of undefined   is thrown when the map function in the CommentList component is executed      What would cause the prop to be undefined when passing from CommentBox into the CommentList        First component var CommentList   React createClass     render  function         var commentNodes   this props data map function  comment         return  lt div gt  lt h1 gt  comment author  lt  h1 gt  lt  div gt               return  lt div className  commentList  gt  commentNodes  lt  div gt              Second component     var CommentBox   React createClass      getInitialState  function         return  data                getComments  function            ajax           url  this props url          dataType   json           success  function data   this setState  data  data     bind this           error  function xhr  status  err   console error url  status  err toString      bind this                     componentWillMount  function          this getComments            render  function          return  lt div className  commentBox  gt   lt CommentList data  this state data comments   gt   lt  div gt             React renderComponent   lt CommentBox url  comments json    gt   document getElementById  content

User · Answer

You need to put the data before render

Should be like this:

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

React.render(
  <CommentBox data={data}/>,
  document.getElementById('content')
);

Instead of this:

React.render(
  <CommentBox data={data}/>,
  document.getElementById('content')
);

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

User · Answer

I considered giving a comment under the answer by taggon to this very question  but well  i felt it owed more explanation for those interested in details      Uncaught TypeError  Cannot read property  value  of undefined is strictly a JavaScript error     Note that value can be anything  but for this question value is  map     It s critical to understand that point  just so you avoid endless debugging cycles  This error is common especially if just starting out in JavaScript  and it s libraries frameworks   For React  this has a lot to do with understanding the component lifecycle methods      Follow this example to get the context    Ignore any complexity  focus on how  props  are passed down to children  import React    useEffect   from  react      Main component const ShowList        gt         Similar to componentDidMount and componentDidUpdate   useEffect      gt      dispatch call to fetch items  populate the redux-store      return  lt div gt  lt MyItems items  movies    gt  lt  div gt        other component const MyItems   props   gt     lt ul gt       props items map  item  i    gt   lt li key  i  gt item lt  li gt       lt  ul gt          The above code should work fine  except for one problem    When compiling  lt ShowList  gt     React-DOM renders  lt MyItems gt  before useEffect  or componentDid     is called    And since  items  movies     props items  is  undefined  at that point    Thus the error message  Cannot read property map of undefined        As a way to tackle this problem   taggon gave a solution  see first anwser or link       Solution  Set an initial default value  In our example  we can avoid items being  undefined  by declaring a default value of an empty array    Why  This allows React-DOM to render an empty list initially And when the useEffect or componentDid    method is executed  the component is re-rendered with a populated list of items       Let s update our  other  component    destructure the  items  and initialize it as an array  const MyItems     items          gt     lt ul gt       items map  item  i    gt   lt li key  i  gt item lt  li gt       lt  ul gt

User · Answer

The error  Cannot read property  map  of undefined  will be encountered if there is an error in the  this props data  or there is no props data array    Better put condition to check the the array like   if this props data   this props data map

User · Answer

First of all  set more safe initial data   getInitialState   function         return  data   comments            And ensure your ajax data   It should work if you follow above two instructions like Demo   Updated  you can just wrap the  map block with conditional statement   if  this props data      var commentNodes   this props data map function  comment         return            lt div gt             lt h1 gt  comment author  lt  h1 gt           lt  div gt

User · Answer

The error occur mainly becuase the array isnt found  Just check if you have mapped to the correct array  Check the array name or declaration

User · Answer

in my case it happens when I try add types to Promise all handler  Promise all  1 2   then   num1  num2    number  number    gt  console log  res   num1     If remove     number  number   the error is gone

User · Answer

I think you forgot to change    data  this props data    to  data  this state data    in the render function of CommentBox  I did the same mistake when I was following the tutorial  Thus the whole render function should look like  render  function       return        lt div className  commentBox  gt         lt h1 gt Comments lt  h1 gt         lt CommentList data  this state data    gt         lt CommentForm   gt       lt  div gt           instead of   render  function       return        lt div className  commentBox  gt         lt h1 gt Comments lt  h1 gt         lt CommentList data  this props data    gt         lt CommentForm   gt       lt  div gt

[reactjs] Cannot read property 'map' of undefined

Examples related to reactjs