Iterating through FS collection map/array problem

react
1

First steps into React – and trying to iterate through an (existing) collection. The subscription seems to work fine, but I can’t find out how to render “metadata.tags”. It seems that the map function is having trouble with the data.

In Blaze this was pretty straight forward … but maybe I’m missing the obvious. Thanks for any help!

Error:

Uncaught TypeError: this.getMeteorData(...).map is not a function

Component:

Tags = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    let docTags = {};
    const handle = Meteor.subscribe('PixTags');
    if (handle.ready()) {
      docTags = MyPix.find().fetch();
    }
    return docTags;
  },
  renderTags() {
    return this.getMeteorData().map((tag) => {
      return <Tag key={tag._id} tag={tag} />;
    });
  },
  render() {
    return (
      <div className="container">
        <ul>
          {this.renderTags()}
        </ul>
      </div>
    );
  },
});

Data via the console:
this is a stripped down publication that only includes the metadata.tags from the collection

2

Don’t try to call the getMeteorData() function directly. Instead update it to return an object with a reference to your docTags values, then reference these values using this.data.docTags. For example:

getMeteorData() {
  let docTags = [];
  const handle = Meteor.subscribe('PixTags');
  if (handle.ready()) {
    docTags = MyPix.find().fetch();
  }
  return {
    docTags
  };
},

renderTags() {
  return this.data.docTags.map((tag) => {
    return <Tag key={tag._id} tag={tag} />;
  });
},
3

Unfortunately it’s still not working: Uncaught TypeError: this.data.docTags.map is not a function.

I suspect the map function has problems with the array. But I don’t know …

4

Change let docTags = {}; to let docTags = [];. Right now when the handle.ready() check is false you’re returning an object for the docTags value, which doesn’t have a map function.

5

Aww … thanks @hwillson! That’s what I was missing. Here’s the component I ended up with:

Tags = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    let allDocsTags = [];
    const handle = Meteor.subscribe('PixTags');
    if (handle.ready()) {
      allDocsTags = MyPix.find().fetch();
    }
    return {
      allDocsTags,
    };
  },

  uniqueTags() {
    let uniqueTagsArray = [];
    this.data.allDocsTags.map((doc) => {
      const tags = doc.metadata.tags;
      tags.forEach(function(element) {
        // add tag to array if it doesn't exist
        if (!uniqueTagsArray.includes(element)) {
          uniqueTagsArray.push(element);
        }
      });
    });
    return uniqueTagsArray.sort().join(', ');
  },

  render() {
    return (
      <div className="container">
        { this.uniqueTags() }
      </div>
    );
  },
});