How to wrap JSX elements in a single div when using .map() with React?

Question

What I want to do:

Render a list of items as a component inside of another component

<div>
...
  <RenderBuildings buildings={this.props.buildingData} />
...
</div>

What happens:

I get this error:

Syntax Error: Adjacent JSX elements must be wrapped in an enclosing tag

What my code looks like:

const RenderBuildings = (props) => {
       return (
         props.buildings.allComps.map((building, index) => {
            let id = index + 1
              <TableRow>
                <TableRowColumn style={{width: 12}}>{id}</TableRowColumn>
                <TableRowColumn>{building.name}</TableRowColumn>
                <TableRowColumn>{building.address}</TableRowColumn>
                <TableRowColumn>{building.status}</TableRowColumn>
              </TableRow>
            )}
          )
  }

What I suspect is happening:

Seems pretty clear that the whole thing should be somehow be wrapped in a div, but I'm not sure how to make that work with a map function. How do you wrap the whole response in that?

Answer 1

Try below, .map requires a return statement when body is in curly braces.

 const RenderBuildings = (props) => { return ( <div> {props.buildings.allComps.map((building, index) => { let id = index + 1; return ( <TableRow key={'row' + index}> <TableRowColumn style={{width: 12}}>{id}</TableRowColumn> <TableRowColumn>{building.name}</TableRowColumn> <TableRowColumn>{building.address}</TableRowColumn> <TableRowColumn>{building.status}</TableRowColumn> </TableRow> ); });} </div> ); } 

Answer 2

I am assuming you are building a table

   import React, { Fragment } from 'react'
   const RenderBuildings = (props) => {
   return (
     <Fragment>
      {
        props.buildings.allComps.map((building, index) => {
          let id = index + 1
          return (
             <TableRow key={id}>
               <TableRowColumn style={{width: 12}}>{id}</TableRowColumn>
               <TableRowColumn>{building.name}</TableRowColumn>
               <TableRowColumn>{building.address}</TableRowColumn>
               <TableRowColumn>{building.status}</TableRowColumn>
            </TableRow>
          )
        })
       }
   </Fragment >
  )
}

Answer 3

I believe this is what you're trying to achieve:

 const RenderBuildings = (props) => { return ( <div> props.buildings.allComps.map((building, index) => { let id = index + 1 <TableRow key={id}> <TableRowColumn style={{width: 12}}>{id}</TableRowColumn> <TableRowColumn>{building.name}</TableRowColumn> <TableRowColumn>{building.address}</TableRowColumn> <TableRowColumn>{building.status}</TableRowColumn> </TableRow> )} </div> ) 

Answer 4

This is correct code for you..

const RenderBuildings = (props) => {
  return (
    <div>
    {props.buildings.allComps.map((building, index) => {
      let id = index + 1;
      return (
        <TableRow key={'row' + index}>
          <TableRowColumn style={{width: 12}}>{id}</TableRowColumn>
          <TableRowColumn>{building.name}</TableRowColumn>
          <TableRowColumn>{building.address}</TableRowColumn>
          <TableRowColumn>{building.status}</TableRowColumn>
          </TableRow>
      );
     });}
    </div>
  );
}


As you mention you try this but i think you forgot to add return in map funtion. Because I was also done similar mistake when i just start coding in es6.