reactjsjsx

Conditional rendering in JSX

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?

Solution

  • 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.