0

Bom dia pessoal, passei por uma situação recente onde eu tive que resolver a base de uma gambiarra mas gostaria de saber se há uma forma de fazer o que eu tinha em mente no momento mas não consegui realizar. A questão é a seguinte, eu estava consumindo uma API e da mesma eu estava tendo um retorno de um Objeto onde cada indice obtinha um Array com 2 informações ( 1 medida e 1 nome ). Eu gostaria de saber se com React eu conseguiria informar no .map() quantas DIV's eu queria criar a cada 3 Indices por exemplo, ficando mais facil a estilização depois. Há uma forma de fazer isso ?

Esse é o retorno do Objeto na API:

Function do Controller - 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 e Page para renderizar o 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);

Agradeço a qualquer ajuda proporcionada.

4
  • "a cada 3 Indices por exemplo" o que quer dizer com indices? 5/01/2021 às 12:05
  • ingredient1 por exemplo é um indice, ou seja, dentro de uma DIV eu gostaria de colocar o ingredient1, 2 e 3, na proxima o 4, 5 e 6 e assim por diante
    – leozera
    5/01/2021 às 13:09
  • Amigo, eu apenas peguei e copiei o console.log que foi dado pelo Node. Mas enfim, vou acrescentar o código que estou usando atualmente.
    – leozera
    5/01/2021 às 13:32
  • Pronto. Bom, basicamente com o código atual pra cada Ingredient é formada uma DIV, eu gostaria de agrudar mais de 1 ingrediente em uma DIV para que eu pudesse fazer uma estilização diferente.
    – leozera
    5/01/2021 às 13:38

1 Resposta 1

1

Tendo esse ingredientsAndMeasures que você recebe da API, o que você vai fazer é relativamente simples, vai transformar o objeto em um array (no seu caso podendo desconsiderar as chaves).

Em seguida, vai criar um array vazio que vai receber os arrays de ingredientes separados e escolher o tamanho da divisão.

  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

Tendo isso setado, fará a divisão através de um forEach no array com os ingredientes, adicionando de n em n a novos arrays dentro do 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];
  })

Assim, você terá um array com diversos arrays de tamanho N (que contém os ingredientes divididos), basta então iterar isso.

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

O divs ja é o seu componente, aí é só estilizar ele (e botar keys para identificar tudo que foi iterado);


Segue o código inteiro dessa parte

  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 Versão do divs puxando imagem da 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>;
10
  • Posso fazer essa parte direto na Page do Drink ou tem que ser no Componente DrinkItem ?
    – leozera
    5/01/2021 às 17:58
  • Aí você escolhe, no seu caso o ideal é fazer no componente DrinkItem porque você já está passando a resposta do servidor pra ele, tratando lá e por granularização. Mas como aparentemente (me corrija se estiver errado) está interessado só no primeiro item do retorno caso exista, basta substituir o drink.ingredientsAndMeasures na conversão para array por drinkInfo[0].ingredientsAndMeasures no Page Drink 5/01/2021 às 18:14
  • No caso utilizar o script que mandei com drinkInfo[0].ingredientsAndMeasures 5/01/2021 às 18:16
  • Na verdade eu me interesso pelas 2 informações do Array pq são a medida e o nome do ingrediente. Mas o fato é que, creio que posso fazer direto na Page pois é só ali que precisa tratar essa questão, já que a estilização eu poderia fazer direto por ela. De qualquer forma, vou testar das 2 formas e ver qual me cai melhor.
    – leozera
    5/01/2021 às 18:16
  • Eu disse no "primeiro item do retorno" porque sua página aparentemente mostra uma bebida por vez apenas, o primeiro item no caso seria a bebida encontrada. Aí para a estilização, basta adicionar as classes ou style na const divs 5/01/2021 às 18:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .