Some Component's Not Rendering

Question

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 <ListItem />, it doesn't for some reason seem to be actually rendering the contents of the ListItem component:

var item = <ListItem company={company} />;

I push that to a list array:

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

Then at the end I push the list into a final list called formattedCompanies:

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

Then in the end, the component returns the list of formatted Companies in render:

return(<span>{formattedCompanies}</span>);

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

CompanyList.js

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

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

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

       if(companies && countries && countries.length > 0){

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

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

                   list.push(link);
               }
           }
       }

       return (<div>{list}</div>);
   }
});

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

       return(<li>{link}</li>);
   }
});

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

        return (<ul className={cssClass}>{links}</ul>);
    }
});

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

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

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

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

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

            for(let company of companies){
                var item = <ListItem company={company} />;

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

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

        return(<span>{formattedCompanies}</span>);
    }
});

function findCompaniesByCountry(countryName, companies){

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

    companies = companies.sort(function(a, b) {
        if (a.name < b.name) return -1;
        if (a.name > b.name) return 1;
        return 0;
    });

    return companies;
}

export default CompanyList;

I am not getting any errors other than this warning:

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.

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.

Answer 1

It's just wrong property naming - your List component expects property links:

const List = Component({
    ...
        links = this.props.links
        return (<ul className={cssClass}>{links}</ul>);
    }
});

And you're giving it list:

<List list={list} country={country}/>