How to have nested loops with map in JSX?

Question

I can't achieve to have two nested map:

render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(this.state.templates).map(function(template_name) {
            return (
              <tr key={template_name}><td><b>Template: {template_name}</b></td></tr>

              {this.state.templates[template_name].items.map(function(item) {
                return (
                  <tr key={item.id}><td>{item.id}</td></tr>
                )
              })}
            )
          })}
        </tbody>
      </table>
    )
  }

This gives a SyntaxError: unknown: Unexpected token.

How do you nest map calls in JSX?

Answer 1

You need to wrap it inside an element.

Something like this (I've added an extra tr due to the rules of tables elements):

  render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(templates).map(function (template_name) {
            return (
              <tr key={template_name}>
                <tr>
                  <td>
                    <b>Template: {template_name}</b>
                  </td>
                </tr>
                {templates[template_name].items.map(function (item) {
                  return (
                    <tr key={item.id}>
                      <td>{item}</td>
                    </tr>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

Running Example (without a table):

const templates = {
  template1: {
    items: [1, 2]
  },
  template2: {
    items: [2, 3, 4]
  },
};

const App = () => (
  <div>
    {
      Object.keys(templates).map(template_name => {
        return (
          <div>
            <div>{template_name}</div>
            {
              templates[template_name].items.map(item => {
                return(<div>{item}</div>)
              })
            }
          </div>
        )
      })
    }
  </div>
);
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

I'm not sure if it's correct technically, but as a mnemonic you can remember that: "Every returned JSX element must be only one JSX element".

So most of the times just wrapping what you have in a <></> pair (or any other arbitrary tag pair) will fix the issue. E.g., if you're returning two <div>s from the render method of a component, that will be incorrect, however, if you wrap these two in a <></> pair, most probably it will be fixed.

But notice that sometimes it can get a bit more vague, e.g., when nesting two ES6 maps in each other, for example:

<tbody>
{
  this.categorizedData.map(
    (catgGroup) => (
      <tr>
        <td>{catgGroup}</td>
      </tr>
      this.categorizedData[catgGroup].map(
        (item) => (
          <tr>
            <td>{item.name}</td>
            <td>{item.price}</td>
          </tr>
        )
      )
    )
  )
}
</tbody>

Can be fixed like this:

<tbody>
{
  this.categorizedData.map(
    (catgGroup) => (
      <> // <--- Notice this, it will wrap all JSX elements below in one single JSX element.
        <tr>
          <td>{catgGroup}</td>
        </tr>
        {this.categorizedData[catgGroup].map( // <--- Also notice here, we have wrapped it in curly braces, because it is an "expression" inside JSX.
          (item) => (
            <tr>
              <td>{item.name}</td>
              <td>{item.price}</td>
            </tr>
          )
        )}
      </>
    )
  )
}
</tbody>

---

P.S.: (From documentation): You can also return an array of elements from a React component:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :slight_smile:
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Answer 3

I struggled for a while to get my nested map function to work only to discover that what you return is critical. Make sure you are returning the second map itself and not just the final expected output:

let { categories } = data;

categories = categories.map(category =>
    category.subcategories.map((subcategory, i) => <h2 key={i}>{subcategory.name}</h2>)
);

return (
    <div className="category-container">
        <div>{categories}</div>
    </div>
);

Answer 4

I think the problem is that the return type should be an array but not an object in React16. You could try like this below:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      templates: {
        foo: {
          items: [
            {id: 0},{id:1}
          ]
        },
        bar: {
          items: [
            {id: 2},{id:3}
          ]
        }
      }
    }
  }
  
  renderTemplate = (template, name) => {
    let data = []
    data = template.items
    data.unshift({ name: name })
    return data.map((item, index) => <tr key={index}><td>{item.name ? item.name : item.id}</td></tr>)
  }
  
  render() {
    return (
      <table>
        <tbody>
          {Object.keys(this.state.templates).map(name => {
            return this.renderTemplate(this.state.templates[name], name)
          })}
        </tbody>
      </table>
    )
  }
}



ReactDOM.render(<App />, document.getElementById('root'))

td {
  color: white;
  padding: 0 20px;
  background: grey;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>