React nested rendering

Question

I have an object containing several arrays like:

const Items = {
Deserts: [{name:cookies}, {name:chocolate}],
Fruits: [{name:apple}, {name:orange}]
...
}

I want to render it as:

<title>Deserts</title>
Cookies
Chocolate
<title>Fruits</title>
Apple
Orange

So first I render the type:


return <Grid>
    {Object.keys(Items).map(type => {
        return <Box key={type}>
            {type} // <== this would be the title, Fruits or whatever
            {this.createCard(Items[type])}
        </Box>
    })}
</Grid>

Then I want to add the content of each type:

createCard = (items) => {
  return <Box>
       {items.forEach(item => {
           return <div>{item.name}</div>
       })}
  </Box>
}

Content is not returned, it works fine if instead of a forEach loop I just add some predefined content.

Possible duplicate of Loop inside React JSX

Emile Bergeron
– Emile Bergeron

2019-11-22 19:53:34 +00:00
Commented Nov 22, 2019 at 19:53 — Emile Bergeron
– Emile Bergeron, Commented Nov 22, 2019 at 19:53

mgarcia · Accepted Answer · 2019-11-22 19:43:10Z

2

The forEach method only iterates over all items but does not return anything. Instead, what you want to use is a map. Also, make sure you wrap your return value when it extends more than one line:

createCard = (items) => {
  return (<Box>
       {items.map(item => {
           return <div>{item.name}</div>
       })}
  </Box>);
}

If you don't do that it works as if a semicolon was introduced after the first line. So, in reality, your current code is equivalent to:

createCard = (items) => {
  return <Box>;
  // The code below will never be executed!
       {items.forEach(item => {
           return <div>{item.name}</div>
       })}
  </Box>
}

answered Nov 22, 2019 at 19:43

mgarcia

6,3763 gold badges23 silver badges43 bronze badges

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

1 Comment

Asaf Aviv Over a year ago

Actually the second statement is not correct, it's perfectly fine to return Box without parentheses. ASCI will take place if you move <Box> to the next line after the return. Also don't forget to add a key

b.stevens.photo · Accepted Answer · 2019-11-23 02:41:46Z

When returning an element you need to wrap it in parentheses, ( ) and I generally use map instead of forEach.

const createCard = items => {
   return (
      <Box>
       {items.map(item => {
           return ( <div>{item.name}</div> )
       })}
     </Box>
   )
}

I believe you can also nix the curly braces if the function doesn't need any logic.

const createCard = items => (
    <Box>
        {items.map(item => {
            return ( <div>{item.name}</div> )
        })}
    </Box>
)

-- Edit --

Now that I'm reading back over your question a much cleaner way to approach this would be to declare the component function outside of your class like

class Grid extends react.Component {
   render(){
      return (
         <Box>
            <CreateCard props={ item }/>
         </Box
      )
   }
}

const CreateCard = props => (
    <Box>
        {props.items.map(item => {
            return ( <div>{item.name}</div> )
        })}
    </Box>
)

Collectives™ on Stack Overflow

React nested rendering

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related