What I want to do:

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

<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?

What I want to do:

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

<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?

• javascript
• reactjs

• 1 You're not returning anything from the map – Sterling Archer Commented Mar 16, 2018 at 17:55
• 2 TableRow must have the key prop – AngelSalazar Commented Mar 16, 2018 at 17:56
• 2 you can also use the Fragment ponent reactjs/docs/fragments.html – AngelSalazar Commented Mar 16, 2018 at 17:57

4 Answers 4

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>
  );
}

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

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.

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>
)