How do I render an array within an object of array in React Native

Question

The code below shows 2 functions that SHOULD render components to the screen. When I map through an array, the components render. The problem is when I attempt to map through an array within an object in an array, the components won't render.

So let's imagine we have this dataset:

const categories = [
  {
    title: "Burgers",
    items: [
      {
        item_number: 0,
        name: "Cheese Burgers"
      },
      {
        item_number: 1,
        name: "Double Cheese Burgers"
      },
      {
        item_number: 2,
        name: "Triple Cheese Burgers"
      }
    ]
  }
];

And then we have this render function:

 render() {
    const { backgroundImage, menuIndex } = this.props.screenProps;

    return (
      <View>
        {/*THIS DOES RENDER*/}
        {categories ? (
          categories.map((category, i) => (
            <Card key={i} image={backgroundImage}>
              <Text style={{ marginBottom: 10 }}>{category.title}</Text>
            </Card>
          ))
        ) : (
          <ActivityIndicator style={styles.center_screen} />
        )}

        {/*THIS DOES NOT RENDER*/}
        {categories ? (
          categories[menuIndex].items.map((item, i) => {
            <View key={i}>
              {console.warn(item.name)}
              <Text>{item.name}</Text>
            </View>;
          })
        ) : (
          <ActivityIndicator style={styles.center_screen} />
        )}
      </View>
    );
  }
}

The variable "categories" is called from an API and while it's in route the Activity Indicator shows. When it's not null, I'm able to map through the array and display text from each object. However, when I try to map through an array within an object of an array, I'm not able to render text to the screen. When I log the warning to the screen, I'm able to see the "item.name" but not within a Text component.

How and why is this happening?

Yes, i can see it in the YellowBox component but not in a Text component. — Dr. Div, Jan 07 '19 at 04:12
Did you try removing the yellow box? Just a hunch. Might have halted the render. — Franrey Saycon, Jan 07 '19 at 04:18
When you have an arrow function and start a block `{}` statement, there is no *implicit return*, it expects an explicit `return` statement, you can either, replace the curly braces by parentheses to make the implicit return work, or use a `return` statement explicitly... — Christian C. Salvadó, Jan 07 '19 at 04:28

Just code · Answer 1 · 2019-01-07T04:24:07.843

You are missing return statement inside map

change

categories[menuIndex].items.map((item, i) => {
            <View key={i}>

to

categories[menuIndex].items.map((item, i) => {
       return <View key={i}>

When you have custom expression (multiline expressions) you need to write some custom logic inside the iterator and hence you want to wrap it to curly braces {}, in this way your map callback expect your to return the result.

Demo

score 1 · Answer 2 · answered Jan 07 '19 at 04:22

{/*THIS DOES NOT RENDER*/}
{categories ? (
  categories[menuIndex].items.map((item, i) => {
    return (
     <View key={i}>
      {console.warn(item.name)}
      <Text>{item.name}</Text>
    </View>
    );
  })
)

Have you tried returning return your view ?

How do I render an array within an object of array in React Native

2 Answers2