javascript - How to make 3 column row from API data in React

Question

First time doing this so please bear with me.

Using Bootstrap. Trying to make some data present itself as a 3 column row. And at the end of each row, make a new row.

Is there a way to do this with the code below?

Code sandbox here.

Here's the code:

      <input
        className="search"
        type="text"
        placeholder="Search by model..."
        onChange={(e) => setSearchValue(e.target.value)}
        value={searchValue}
      />
      {/* Map through first level */}
      {data.map((item) => (
        <ul>
          {/* Filter and map through the second level */}
          {item.product_details.filter(filterProducts).map((subItem) => (
            <div className="row">
              <div className="col-lg-4">
                <MachineCard
                  image={subItem.image}
                  title={subItem.model}
                  weight={subItem.operating_weight}
                  power={subItem.power}
                />
              </div>
            </div>
          ))}
        </ul>
      ))}

question from:https://stackoverflow.com/questions/65924078/how-to-make-3-column-row-from-api-data-in-react

Answer 1

Waitting for answers