import React from 'react/addons';
import Backbone from 'backbone';
import Router from 'react-router';
import stores from 'stores';
import Stats from './Stats.react';

export default React.createClass({
    displayName: "ProvidersList",

    render: function () {
    let providers = this.props.providers;

    let ProviderCards =  providers.map(function(item) {
        let provider = item.attributes;
        return (
            <li key={provider.id}>
                <div className="media card" >
                    <Router.Link to = "provider" params = {{id: provider.id}} >
                        <div className="media__content" >
                            <h2 className="title-3" > {provider.name} </h2>
                        <p className="media__description" > {provider.description} </p>
                        <hr/>
                        <Stats provider={provider} />
                        </div>
                    </Router.Link>
                </div>
            </li>
        );
    });
        return (
            <ul className="app-card-list" >
                {ProviderCards}
            </ul>
        );
    }

});

import React from 'react/addons';
import Backbone from 'backbone';
import Router from 'react-router';
import stores from 'stores';
import Stats from './Stats.react';

export default React.createClass({
    displayName: "ProvidersList",

    render: function () {
        let providers = this.props.providers;

        let ProviderCards = providers.map(function(provider) {
            return (
                <li key={provider.get('id')}>
                    <div className="media card" >
                        <Router.Link
                            to="provider"
                            params={{id: provider.get('id')}}>
                            <div className="media__content">
                                <h2 className="title-3">
                                    {provider.get('name')}
                                </h2>
                                <p className="media__description">
                                    {provider.get('description')}
                                </p>
                                <hr/>
                                <Stats provider={provider} />
                            </div>
                        </Router.Link>
                    </div>
                </li>
            );
        });
        return (
            <ul className="app-card-list">
                {ProviderCards}
            </ul>
        );
    }

});

Remove referencing Backbone.Model's attributes internal structure
Remove referencing Backbone.Model's attributes internal structure

We should *never* use `attributes` as it violates the contract Models:

http://backbonejs.org/#Model-attributes

The contract of a Backbone.Model is that you access the properties held
in it via `.get('attr-name')`

Here, I mean for properties & attributes to be synomyms.

You can see the Backbone docs warn about this in relate to setting an
attribute for a Model:

```
Please use set to update the attributes instead of modifying
them directly.
```
source: http://backbonejs.org/#Model-attributes
