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?