Render Object based on loop?

Question

I want to render x amount of objects based on x entries I have in my list, currentSelection. I tried to do this, but I got an error saying it can't find item for some reason. If I can get some help, I would appreciate it!

Relevant code:

                  currentSelection.map(item => {
                    <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
                        <MaterialCommunityIcons name="star" color="red" size={20}/>
                    </View>
                  });

Edit syntax error with this:

                 currentSelection.map(item => {
                    return (
                        <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
                            <MaterialCommunityIcons name="star" color="red" size={20}/>
                        </View>
                    ); //tried with ); and ) and got the same error
                  });

More relevant code:

const renderItems = () => {
  currentSelection.map(item => {
    return (
      <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
        <MaterialCommunityIcons name="star" color="red" size={20}/>
      </View>
    );
  });
}
return (
        <ScrollView>
            <View style={ [styles.iconPosition, {flexDirection:"row"}] }>
                <TouchableOpacity style={ styles.button } onPress={ () => navigation.dispatch(StackActions.pop(1))}>
                    <MaterialCommunityIcons name="arrow-left" color="red" size={30}/>
                </TouchableOpacity>
                <Image source = { Logo } style = { styles.iconSize } />
            </View>
            <View style={styles.tabBar}>
                <MaterialTabs
                    items={['Your Favorite Meals', 'Select Favorite Meals']}
                    selectedIndex={selectedTab}
                    onChange={setSelectedTab}
                    barColor="#ffffff"
                    indicatorColor="#000000"
                    activeTextColor="#000000"
                    inactiveTextColor="#908c8c"
                />
            </View>
            {selectedTab === 0 ? (
                <View>
                    <View style={ styles.selectMultipleView }>
                        <SelectMultiple
                          items={currentSelection}
                          selectedItems={removeSelection}
                          onSelectionsChange={onFavSelectionsChange}
                          />
                          {renderItems}
                    </View>

Answer 1

You can make a function that will render the needed amount of items and then call it where you need like so:

const renderItems = () => {
  return currentSelection.map(item => {
    return (
      <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
        <MaterialCommunityIcons name="star" color="red" size={20}/>
      </View>
    ); //there you obviously need to put it in a return
  });
}

and then call it somewhere in your component

{renderItems()}

you can look at example here

a second option will be doing it like so:

const renderItems = data.map(item => {
  return(<Text>{item}</Text>)
})

...
{renderItems}
...