Feed data into abstract components

help
1

Hi,

I have a question that is kind of bothering me for quite a while.

I really love the way ReactJS works how you can implement a single component that is abstracted from everything, and has a purpose: listing some data, upload a photo, etc. That part is what I like about having a component, for me a component does not have to care about where the data is coming from, just have a point of entry for the data and display it, etc.

for example:

<CoolTable data={myCrazyList} headerTitle="This is My Cool Data" />

and this displays the data.

My problem is when I start seeing this kind of stuff:

Items = React.createClass({  
  mixins: [ReactMeteorData],
  getMeteorData: function() {
    return {
      items: ItemsCollection.find({}).fetch()
    };
  },
  getInitialState: function() {
    return {};
  },
  addItem: function(e) {
    e.preventDefault();
    var item = React.findDOMNode(this.refs.input).value;

    ItemsCollection.insert({'content': item});
    React.findDOMNode(this.refs.input).value = "";
  },
...

Why is

items: ItemsCollection.find({}).fetch()

inside of this class/component ?

This class should not be aware of what is ItemsCollection, or I’m I wrong?

This is just me wondering.

thanks