在ReactJS中映射和渲染子数组

Question

I have a data object that is constructed like this:

[{"groupid":"15","items":[
{"id":"42","something":"blah blah blah"},
{"id":"38","something":"blah blah blah"}]},
{"groupid":"7","items":
[{"id":"86","something":"blah blah blah"},
{"id":"49","something":"blah blah blah"}]}]

I am trying to iterate through the groups, then iterate through the items, inside the ReactJS render() method.

Here is what I am trying to do:

render () {
   return(
      { this.state.dataArray.map( function(group, i) {

          return(<Row><Col>{group.groupid}</Col></Row>

           // { group.items.map( function(activity, j) {
           //     return (<Row><Col>{item.id}</Col></Row>)
           //     }, this) }

         )

       }, this) }
    )
}

The first .map works, and if I remove the return() that is inside the first .map I can run the second .map ... but if I use this structure and uncomment the commented code, I get an error in my Terminal saying there is an Unexpected token at group.item.map

Can you provide assistance in how to accomplish this?

Answer 1

You can have only single parent element and rest wrapped in it in the return of react elememt.

Eg:

return(
<p>Hello</p>
<p>World</p>
)

gives you error

It must be wrapped like

return( 
    <div> 
      <p>Hello</p> 
      <p>World</p> 
    </div> 
)

wrap your code in a single parent like 'div'

`

      return(
           <div>
              <Row><Col>{group.groupid}</Col></Row>

              { group.items.map( function(activity, j) {
                return (<Row><Col>{item.id}</Col></Row>)
               }, this) }
        </div>
     )

   }, this) }
)

}`