Choosing how many DIV’s to mount at a time within a . map()

Question

Good morning guys, I went through a recent situation where I had to resolve the basis of a gambiarra but I wonder if there is a way to do what I had in mind at the time but could not accomplish. The point is, I was consuming an API and the same I was having a return of a Object where each Indian obtained one Array with 2 information ( 1 measure and 1 name ). I would like to know if with React I could inform on .map() how many DIV’s I wanted to create every 3 Indices for example, making it easier to stylize later. There is a way to do this ?

This is the return of the Object in the API:

Controller Function - Backend:

async searchById(req, res) {
    const idDrink = req.query.idDrink;

    baseurl.get(`/lookup.php?i=${idDrink}`)
      .then(function (response) {
        const results = response.data.drinks || [];

        if (results.length > 0) {
          const data = results.map(item => {
            return {
              id: item.idDrink,
              name: item.strDrink,
              category: item.strCategory,
              tags: item.strTags,
              alcoholic: item.strAlcoholic,
              glass: item.strGlass,
              instructions: item.strInstructions,
              image: item.strDrinkThumb,
              ingredientsAndMeasures: {
                ingredient1: [item.strMeasure1, item.strIngredient1],
                ingredient2: [item.strMeasure2, item.strIngredient2],
                ingredient3: [item.strMeasure3, item.strIngredient3],
                ingredient4: [item.strMeasure4, item.strIngredient4],
                ingredient5: [item.strMeasure5, item.strIngredient5],
                ingredient6: [item.strMeasure6, item.strIngredient6],
                ingredient7: [item.strMeasure7, item.strIngredient7],
                ingredient8: [item.strMeasure8, item.strIngredient8],
                ingredient9: [item.strMeasure9, item.strIngredient9],
                ingredient10: [item.strMeasure10, item.strIngredient10],
                ingredient11: [item.strMeasure11, item.strIngredient11],
                ingredient12: [item.strMeasure12, item.strIngredient12],
              },
            }
          })
          return res.status(200).json(data)
        }
      })
  },

Components and Page to render Drink - Frontend:

Drinkitem Component:

import React from 'react';
import { connect } from 'react-redux'
import './drink-item.css';

function DrinkItem(props) {

  return (
    <div className='drink-wrapper'>
      {props.items && props.items.map(drink => (
        <div className="drink-items-wrapper" key={drink.id}>
          
          <div className="separate-content">

            <div className="drink-image">
              <a href={drink.image} target="_blank"><img src={drink.image} alt={drink.name}/></a>
              <b>{drink.name || "Drink undefined"}</b>
            </div>

            <div className="drink-content">
              <div className="drink-info">
                <p><b>Glass Recomended:</b> {drink.glass}</p>
                <p><b>Drink Category:</b> {drink.category}</p>
                <p><b>Alcoholic:</b> {drink.alcoholic === 'Alcoholic' ? "Yes" : "No"}</p>
              </div>

              <div className="drink-instruction">
                <h2>Instructions</h2>
                <textarea>{drink.instructions}</textarea>
              </div>
            </div>

          </div>

          <div className="wrap-title-ingredients">
            <h2>Ingredients</h2>
          </div>
          {Object.values(drink.ingredientsAndMeasures).map(ing => (
            ing[0] || ing[1] !== null
              ? 
              <div className="drink-ingredients">
                  <img src={'https://www.thecocktaildb.com/images/ingredients/' + `${ing[1]}` + '-Small.png'} alt={ing} />
                  <p>{ing}</p>
                  <div className="separator"></div>
              </div>
              : <span></span>
          ))}
        </div>
      ))}
    </div>
  )
}

export default connect()(DrinkItem);

Page Drink:

import React, { useState, useEffect } from 'react'
import api from '../../services/api';
import { connect } from 'react-redux';

import DrinkItem from '../../components/DrinkItem/DrinkItem'
import Header from '../../components/Header/Header';
import Footer from '../../components/Footer/Footer';

import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";
import './drink.css';

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

function Drink({ drink }) {
  const [drinkInfo, setDrinkInfo] = useState([]);
  const [isDrinkInfoLoading, setisDrinkInfoLoading] = useState(false);

  const idDrink = drink.id || drink.idDrink;

  async function getDrinkInfo() {
    setisDrinkInfoLoading(true)
    await api.get('searchId', {
      params: {
        idDrink: idDrink,
      }
    }).then(function (response) {
      setisDrinkInfoLoading(false);
      setDrinkInfo(response.data)
    })
  }

  console.log(drinkInfo)

  useEffect(() => {
    getDrinkInfo();
  }, [])

  return (
    <>
      <div className="content-drink"> 
        <Header />

        <div className="sweet-loading">
          <ClipLoader
            css={override}
            size={150}
            color={"#123abc"}
            loading={isDrinkInfoLoading}
          />
        </div>

        <div className="wrap-drink">
          <div className="wrap-title">
            <h1>
              {drinkInfo.length > 0
              ? <h1>{drinkInfo[0].name}</h1>
              : <h1>Loading Item Name</h1>
              }
            </h1>
          </div>

          {drinkInfo.length > 0
            ? <DrinkItem items={drinkInfo} />
            : <div><p>No Drink to show !</p></div>
          }
        </div>
      </div>
      <Footer />
    </>
  )
}

export default connect(state => ({
  drink: state.drink,
}))(Drink);

I appreciate any help provided.

Answer 1

Having this ingredientsAndMeasures that you receive from the API, what you will do is relatively simple, will transform the object into an array (in your case you can disregard the keys).

It will then create an empty array that will receive the separate ingredient arrays and choose the division size.

  const ingredientsArray = Object.values(drink.ingredientsAndMeasures); //Conversão de objeto para array

  const divComponents = []; //Declaração do array que receberá os ingredientes divididos de n em n
  const tamDivisao = 3; //Tamanho da divisão

Having this set, it will split through a foreach in the array with the ingredients, adding n to new arrays within the array divComponents

  ingredientsArray.forEach((v, i) => {
    if(i % tamDivisao === 0){
      divComponents.push([]); // Adiciona um array vazio ao array principal
    }
    divComponents[Math.floor(i/tamDivisao)] = [...divComponents[Math.floor(i/tamDivisao)], v];
  })

Thus, you will have an array with several arrays of size N (containing the split ingredients), just iterate it.

  const divs = <div>{divComponents.map((v)=>{
    return <div style={{border: "1px solid red"}}>{v.map((w)=>{
      return <div></div>;
    })}</div>
  })}</div>;

The divs already is its component, so just style it (and put Keys to identify everything that was iterated);

---

Follow the whole code of that part

  const ingredientsArray = Object.values(drink.ingredientsAndMeasures); //Conversão de objeto para array

  const divComponents = []; //Declaração do array que receberá os ingredientes divididos de n em n
  const tamDivisao = 3; //Tamanho da divisão

  ingredientsArray.forEach((v, i) => {
    if(i % tamDivisao === 0){
      divComponents.push([]);
    }
    divComponents[Math.floor(i/tamDivisao)] = [...divComponents[Math.floor(i/tamDivisao)], v];
  })

  const divs = <div>{divComponents.map((v)=>{
    return <div style={{border: "1px solid red"}}>{v.map((w)=>{
      return <p>{w[0]}, {w[1]}</p>;
    })}</div>
  })}</div>;

---

EDIT Version of divs pulling image from API

  const divs = <div>{divComponents.map((v)=>{
    return <div style={{border: "1px solid red"}}>{v.map((w)=>{
      return <div>
              <img src={`https://www.thecocktaildb.com/images/ingredients/${w[1]}-Small.png`} alt={w[1]}/>
              <p>
                {w[0]} - {w[1]}
              </p>
            </div>
    })}</div>
  })}</div>;