Some Component's Not Rendering
<p>I can't figure out why I'm not getting any rendered components for my CompanyLink components.  Seems like here, when I try setting item to a <code>&lt;ListItem /&gt;</code>, it doesn't for some reason seem to be actually rendering the contents of the ListItem component:</p>

<pre><code>var item = &lt;ListItem company={company} /&gt;;
</code></pre>

<p>I push that to a list array:</p>

<pre><code>if(company){list.push(item)};
</code></pre>

<p>Then at the end I push the list into a final list called formattedCompanies:</p>

<pre><code>formattedCompanies.push(
                        &lt;div key={company.id}&gt;
                            &lt;ListHeader company={company} country={country}/&gt;
                            &lt;div&gt;
                                &lt;List list={list} country={country}/&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;);
</code></pre>

<p>Then in the end, the component returns the list of formatted Companies in render:</p>

<pre><code>return(&lt;span&gt;{formattedCompanies}&lt;/span&gt;);
</code></pre>

<p>Problem: when all said and done the <code>&lt;Lists /&gt;</code> component it only returns the  and for some reason doesn't render {list} in {list}</p>

<p><strong>CompanyList.js</strong></p>

<pre><code>const CompanyList = Component({
    store: Store('/companies'),
    render(){
        const companies = this.store.value(),
              countries = this.props.countries;

        return (
            &lt;div className="ft-companies padding-top-20"&gt;
                &lt;div className="column-group"&gt;
                    &lt;div className="all-100"&gt;
                        &lt;p className="section-heading bold padding-top-20 font-22"&gt;Companies that TDD - Interviewed&lt;/p&gt;
                        &lt;div&gt;
                            &lt;Lists countries={countries} companies={companies}/&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
});

const Lists = Component({
   render(){
       var link,
           list = [],
           companies = this.props.companies,
           countries = this.props.countries;

       if(companies &amp;&amp; countries &amp;&amp; countries.length &gt; 0){

           for (let country of countries) {
               var companiesByCountry = [];
                   companiesByCountry = findCompaniesByCountry(country.name, companies);

               if (country &amp;&amp; country.name != "USA") {
                   link = &lt;div key={country.id} className="inline-block ft-companies-other"&gt;
                            &lt;CompanyLinks country={country} companies={companiesByCountry} /&gt;
                          &lt;/div&gt;

                   list.push(link);
               }
           }
       }

       return (&lt;div&gt;{list}&lt;/div&gt;);
   }
});

const ListItem = Component({
   render(){
       var company = this.props.company,
           link = &lt;Link to={`/interviews/companies/${company.id}`}
                     id={company.id}
                     className="margin-top-10 margin-bottom-10"
                     ref="link"&gt;
                   {company.name}
                  &lt;/Link&gt;

       return(&lt;li&gt;{link}&lt;/li&gt;);
   }
});

const List = Component({
    render(){
        var country = this.props.country,
            cssClass = "ft-company-" + country.name,
            links = this.props.links;

        return (&lt;ul className={cssClass}&gt;{links}&lt;/ul&gt;);
    }
});

const ListHeader = Component({
    render(){
        var company = this.props.company,
            country = this.props.country;

        return(
            &lt;div className="margin-right-30 ft-company-header"&gt;
                &lt;img src={(company.images &amp;&amp; company.images.flag) ? company.images.flag : ""}
                     className="padding-right-5 vertical-align-middle"/&gt;
                &lt;span className="bold"&gt;{country.name}&lt;/span&gt;
            &lt;/div&gt;
        )
    }
});

const CompanyLinks = Component({
    splitToInlineList: function (list){
        return &lt;div className="inline-block margin-right-50"&gt;{list}&lt;/div&gt;;
    },

    render(){
        var country = this.props.country,
            companies = this.props.companies;

        if(companies){
            var formattedCompanies = [],
                list = [];

            for(let company of companies){
                var item = &lt;ListItem company={company} /&gt;;

                if(company){list.push(item)};

                if(country.name != "USA") {
                    formattedCompanies.push(
                        &lt;div key={country.id}&gt;
                            &lt;ListHeader company={company} country={country}/&gt;
                            &lt;div&gt;
                                &lt;List list={list} country={country}/&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;);
                }
            }
        };

        return(&lt;span&gt;{formattedCompanies}&lt;/span&gt;);
    }
});

function findCompaniesByCountry(countryName, companies){

    var companies = companies.filter((company, i) =&gt; company
        .locations.filter(location =&gt; location.country.name === countryName &amp;&amp; location.primary)
        .length &gt; 0 &amp;&amp; company.active);

    companies = companies.sort(function(a, b) {
        if (a.name &lt; b.name) return -1;
        if (a.name &gt; b.name) return 1;
        return 0;
    });

    return companies;
}

export default CompanyList;
</code></pre>

<p>I am not getting any errors other than this warning:</p>

<pre><code>flattenChildren(...): Encountered two children with the same key, `1`. Child keys must be unique; when two children share a key, only the first child will be used.
</code></pre>

<p>I don't think that has anything to do with my problem.  I'm just wondering if I've got some syntax wrong here that I just cannot see...not really sure what's wrong here, I cannot find it.</p>