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>

consider adding a return statement inside map(). You are not returning anything. Wrap <View>.....</View> with a return() — Shivam Jha
– Shivam Jha, Commented Apr 1, 2021 at 18:30
@ShivamJha after doing that, I have an unexpected token error. Any suggestions? — unsaturatedgoods1
– unsaturatedgoods1, Commented Apr 1, 2021 at 18:55

SO27 · Accepted Answer · 2021-04-01 19:19:18Z

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}
...

edited Apr 1, 2021 at 19:19

answered Apr 1, 2021 at 19:08

SO27

9311 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

unsaturatedgoods1 Over a year ago

I get

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

error when do this. I will post more relevant code

SO27 Over a year ago

sorry missed some code, i've updated my answer

unsaturatedgoods1 Over a year ago

this was exactly it! ty so much

Collectives™ on Stack Overflow

Render Object based on loop?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related