React Js - Uncaught Typeerror: This.Props.Data.Map Is Not a Function

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

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')
    );
  }
})

Uncaught TypeError: _this.props.data.map is not a function, Map error to render Component

First of all, please use the correct mapping.
inventoryReducer is not the one you're looking to map.
inventory inside that object is the one you want.

const mapStateToProps = (reducers) => {
    return reducers.inventoryReducer.inventory;
}

Also if you get data in this.props.inventory, it should be related to duplicated keys
Please try the following

printInventory = () => {
    this.props.inventory.map((inventory, index) => {
        return (
            <CardInventario
                key={index}
                cardTitle={inventory.name}
                quantity={inventory.quantity}
                description={inventory.price}
            />
        )
    })
}

If you don't have id, it is possible to use index instead (not recommended though)

printInventory = () => {
    this.props.inventory.map((inventory) => {
        return (
            <CardInventario
                key={inventory.id}
                cardTitle={inventory.name}
                quantity={inventory.quantity}
                description={inventory.price}
            />
        )
    })
}

Getting error "props.data.map is not a function" in React

A good way to go about solving this problem might be to edit your state like so:

this.state = {
  users: [
    {
      first: 'name',
      last: 'name',
      etc...
    },
    {
      first: 'name',
      last: 'name',
      etc...
    }   
  ],
  other: state //if need be
}

This way, you have an array of users and can add more users to the table as needed.

Then you just pass this.state.users to your child component through props.

Uncaught TypeError: this.props.data.map is not a function (using superagent)

It looks like your res.text is a string, not an array. This means it will not have the .map function. If that's the response your API is returning, you'll need to call JSON.parse when setting state, i.e.:

this.setState({ data: JSON.parse(res.text) });

ReactJS: this.props.data.map is not a function

As pointed out by azium my data is an object and not an array like my results were expecting.

To get the "game" array inside the "games" field I set the state as the following:

this.setState({data: data.data.games.game});

To get the other fields I simply created a new state and passed it through a prop i.e. modified_date:

this.state.date = data.data.games.modified_date

The warning: Each child in an array or iterator should have a unique "key" prop. was fixed by adding a "key" property inside the .map method:

render: function() {
    var gameDate = this.props.data.map(function(data) {
        return (
            <h1 key={data.location} >{data.location} </h1>
        );
    });

---

Related Topics