TypeError: undefined is not an object (evaluating 'icons.map') React-Native

Question

I'm trying to render a series of icons from an array, icons , but when I try to return {icons.map((icon, index) =>(<Icon key = {index} icon={icon}/>))} , I get "typeError: undefined is not an object (evaluating 'icons.map')".

Here is the code I'm working with:

const BottomTabs = ({ icons }) => {
    const [activeTab, setActiveTab]  = useState('Home')

    const Icon = ({icon}) => (
        <TouchableOpacity onPress = {() => setActiveTab(icon.name)}>
            <Image source = {icon.inactive} style= {styles.icon}/>
        </TouchableOpacity>
    )

    return (
        <View>
            { icons.map((icon, index) =>(
                <Icon key = {index} icon={icon}/>
            ))}
        </View>
    )
}

Any idea what the issue could be?

EDIT: This is how my array is being passed through the component:

<BottomTabs icons = {bottomTabIcons}/>

And this is an example of what the objects in the array itself looks like:

const bottomTabIcons = [
    {
        name: 'Home',
        active: require('../../assets/home-active.png'),
        inactive: require('../../assets/home.png') 
    }
]

Am I passing the array through my BottomTabs component incorrectly?

Answer 1

You did not pass icons to the BottomTabs component. Check if you pass icons correctly when calling <BottomTabs icons={icons}>