Error Rendering an Array of Custom Components in React Native - react-native

Question

I am trying to render an array of (custom-built) React Native components, but I am getting the following error when I try to do so:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'CategoryList'.
I have a component called CategoryList (which is a stateless component), and it renders a collection of Category components. They are defined below:
CategoryList:
import React, { PropTypes } from 'react';
import View from 'react-native';
import humps from 'humps';
import Category from './Category';
const CategoryList = ({ categories }) => {
const camelizedCategories = humps.camelizeKeys(categories);
const categoryElements = camelizedCategories.map(
(category, idx) => <Category {...category} key={idx} />
);
return (
<View>
{categoryElements}
</View>
);
};
CategoryList.propTypes = {
categories: PropTypes.arrayOf(
PropTypes.shape({
display_name: PropTypes.string.isRequired,
list_name: PropTypes.string.isRequired,
list_name_encoded: PropTypes.string.isRequired,
newest_published_date: PropTypes.string.isRequired,
oldest_published_date: PropTypes.string.isRequired,
updated: PropTypes.string.isRequired,
})
),
};
export default CategoryList;
Category:
import React from 'react';
import { View, Text } from 'react-native';
const Category = ({
displayName,
listName,
listNameEncoded,
newestPublishedDate,
oldestPublishedDate,
updated,
}) => {
return (
<View>
<Text>
{displayName}
</Text>
<Text>
{listName}
{listNameEncoded}
</Text>
<Text>
{listNameEncoded}
</Text>
<Text>
{newestPublishedDate}
</Text>
<Text>
{oldestPublishedDate}
</Text>
<Text>
{updated}
</Text>
</View>
);
};
Category.propTypes = {
displayName: React.PropTypes.string.isRequired,
listName: React.PropTypes.string.isRequired,
listNameEncoded: React.PropTypes.string.isRequired,
newestPublishedDate: React.PropTypes.string.isRequired,
oldestPublishedDate: React.PropTypes.string.isRequired,
updated: React.PropTypes.string.isRequired,
};
export default Category;
Finally, categories is being called as follows:
<CategoryList categories={mockedData} />
Where mockedData is being defined as follows:
const mockedData = [
{
list_name: 'Combined Print and E-Book Fiction',
display_name: 'Combined Print & E-Book Fiction',
list_name_encoded: 'combined-print-and-e-book-fiction',
oldest_published_date: '2011-02-13',
newest_published_date: '2016-08-21',
updated: 'WEEKLY',
},
{
list_name: 'Combined Print and E-Book Nonfiction',
display_name: 'Combined Print & E-Book Nonfiction',
list_name_encoded: 'combined-print-and-e-book-nonfiction',
oldest_published_date: '2011-02-13',
newest_published_date: '2016-08-21',
updated: 'WEEKLY',
},
];

Answer 1

Please check if import View from 'react-native' in CategoryList is a typo in question.
Should be import {View} from 'react-native'

Answer 2

If categories is empty, categoryElements is an empty array.
const categoryElements = camelizedCategories.map(
(category, idx) => <Category {...category} key={idx} />
);
Instead, the code should be:
const categoryElements = camelizedCategories.length > 0 ? camelizedCategories.map(
(category, idx) => <Category {...category} key={idx} />
) : null;