I have an object that I want to render, 8 items per row. At every 8th item, I close the row div and start a new row. This is my code

<div class="usage-row">
  {cpu.map((item, index) => (
  <>
    <div class="cpu">
      <i class={`bi bi-circle-fill ${item.description} led`}></i>
      CPU {item.realname}
    </div>
  {index % 8 === 7 && </div><div class="usage-row">}
  </>
  ))};
</div>

This fails on compilation and I cannot figure out why. Every div gets closed. Brackets and parenthesis checks out. Can anyone explain to me what's going on?

I have an object that I want to render, 8 items per row. At every 8th item, I close the row div and start a new row. This is my code

<div class="usage-row">
  {cpu.map((item, index) => (
  <>
    <div class="cpu">
      <i class={`bi bi-circle-fill ${item.description} led`}></i>
      CPU {item.realname}
    </div>
  {index % 8 === 7 && </div><div class="usage-row">}
  </>
  ))};
</div>

This fails on compilation and I cannot figure out why. Every div gets closed. Brackets and parenthesis checks out. Can anyone explain to me what's going on?

• reactjs
• jsx

Share Improve this question Follow asked Mar 6 at 9:16 Christian BrinchChristian Brinch 10977 bronze badges 2

• 3 JSX doesn't work like a string concatenator, you need complete elements with opening/closing tags. If you want to create multiple usage-rows put the map outside of that element. – DBS Commented Mar 6 at 9:19
• 2 You're treating jsx like php literal, JSX must be enclosed. You need to split your cpu array into chunks and use each chunk to generate each usage-row – Hao Wu Commented Mar 6 at 9:27

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Like @DBS said, with JSX, you should be creating and returning whole elements, so you're looking for something like this:

const cpuRows = /* CPUs split into groups of 8 */

return <>
  {cpuRows.map((row, i) => (
    <div key={i} className="usage-row">
      {row.map((item, j) => (
        <div key={item.id /* or j if the cpu doesn't have a unique key */} className="cpu">
          <i className={`bi bi-circle-fill ${item.description} led`}></i>
          CPU {item.realname}
        </div>
      ))}
    </div>
  ))}
</>

Note that each element returned by a map call should have a unique key property React will use internally. Also, some common attributes are reserved keywords and have different names in JSX, i.e. className instead of class.