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          lt div className  conversation panel panel-default  gt           lt div className  panel-heading  gt             lt h3 className  panel-title  gt               this props id               this props last message snippet               this props other user id             lt  h3 gt           lt  div gt           lt div className  panel-body  gt             lt span dangerouslySetInnerHTML     html  rawMarkup     gt           lt  div gt         lt  div gt                  var ConversationList   React createClass     render  function          window foo              this props data      var conversationNodes   this props data map function conversation  index           return            lt Conversation id  conversation id  key  index  gt            last message snippet  conversation last message snippet            other user id  conversation other user id           lt  Conversation gt                        return          lt div className  conversationList  gt           conversationNodes         lt  div gt                  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          lt div className  conversationBox  gt           lt h1 gt Conversations lt  h1 gt           lt ConversationList data  this state data    gt         lt  div gt                    document  on  page change   function       var  content       content      if   content length  gt  0        React render         lt ConversationBox url   conversations json  pollInterval  20000    gt         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

User · Answer

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 ?

User · Answer

what worked for me is converting the props data to an array using   data   Array from props data    then I could use the data map   function

User · Answer

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

User · Answer

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

User · Answer

try componentDidMount   lifecycle when fetching data

User · Answer

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

User · Answer

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

User · Answer

You don t need an array to do it    var ItemNode   this state data map function itemData    return       lt ComponentName title  itemData title  key  itemData id  number  itemData id   gt

User · Answer

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        gt  dispatch   gt      dispatch  type  STARTFETCHING     AxiosWithAuth        get  http   localhost 3333 api users   id here         then  res    gt               wrapping res data in an array like below is what solved the error          dispatch  type  FETCHEDPROFILE  payload   res data            catch  error    gt            dispatch  type  FAILDFETCH  error  error               export default ProfileAction

User · Answer

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

User · Answer

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          lt div className  conversation panel panel-default  gt           lt div className  panel-heading  gt             lt h3 className  panel-title  gt               this props id               this props last message snippet               this props other user id             lt  h3 gt           lt  div gt           lt div className  panel-body  gt             lt span dangerouslySetInnerHTML     html  rawMarkup     gt           lt  div gt         lt  div gt                  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            lt Conversation id  conversation id  key  index  gt            last message snippet  conversation last message snippet            other user id  conversation other user id           lt  Conversation gt                        return          lt div className  conversationList  gt           conversationNodes         lt  div gt                  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          lt div className  conversationBox  gt           lt h1 gt Conversations lt  h1 gt           lt ConversationList data  this state data    gt         lt  div gt                    document  on  page change   function       var  content       content      if   content length  gt  0        React render         lt ConversationBox url   conversations json  pollInterval  20000    gt         document getElementById  content

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

Examples related to javascript

Examples related to ajax

Examples related to json

Examples related to reactjs