CODEWITHSUNDEEP
arraysreactjs
Anne
Anne

Reputation: 23

Using array inside array in React render

I am a React beginner and I am trying to access the properties of product size through map. The API gives to me this:

{
    "name": "Nome do produto",
    "style": "Código de categoria",
    "code_color": "Código de categoria + código de cor",
    "color_slug": "slug da cor do produto",
    "color": "Nome da cor do produto",
    "on_sale": "booleano - Se o produto está em promoção",
    "regular_price": "preço sem promoção",
    "actual_price": "preço com promoção",
    "discount_percentage": "% de desconto da promoção",
    "installments": "quantidade de parcelas",
    "sizes": [
        {
            "available": "booleano - indica se o tamanho está disponível",
            "size": "nome do tamanho",
            "sku": "código do produto + código do tamanho (para adicionar no carrinho)"
        }
    ]
}

The initial map with product data it's ok to me and I made it correctly in render. But I cannot access size array and my second map are failing. What am I doing wrong?

 import React, { Component } from "react";
import api from "../../services/api";

export default class Home extends Component {
  state = {
    products: [],
    
  } 

  async componentDidMount(){
    const response = await api.get("/catalog");
    this.setState({ products: response.data })
  }

  render () {
    const { products } = this.state;
    
    return (
      <>
        <div>
          { products.map(product => (
              <li key={product.id}>
                <img src={product.image} alt={product.name}></img>
                <strong>{product.name}</strong>
                <span>{product.regular_price}</span>
              </li>
          )) } 
        </div>
        <div className='products__sizes'>                    
          { products.sizes && products.sizes.map(size => (
              <li key={size.sku}>{size.size}</li>
          ))}
        </div>
      </>
    )
  }
}

Upvotes: 2

Views: 1243

Answers (3)

Jay Parmar
Jay Parmar

Reputation: 378

{ products[0].sizes && products[0].sizes.map(size => (
     <li key={size.sku}>{size.size}</li>
 ))}

You have used like this because of the products[0].sizes get a value.

var products = [{
    "name": "Nome do produto",
    "style": "Código de categoria",
    "code_color": "Código de categoria + código de cor",
    "color_slug": "slug da cor do produto",
    "color": "Nome da cor do produto",
    "on_sale": "booleano - Se o produto está em promoção",
    "regular_price": "preço sem promoção",
    "actual_price": "preço com promoção",
    "discount_percentage": "% de desconto da promoção",
    "installments": "quantidade de parcelas",
    "sizes": [
        {
            "available": "booleano - indica se o tamanho está disponível",
            "size": "nome do tamanho",
            "sku": "código do produto + código do tamanho (para adicionar no carrinho)"
        }
    ]
}]

var ans1 = products.map(data => console.info(data))

var ans2 = products[0].sizes.map(data => console.info(data)) 

var ans3 = products.sizes.map(data => console.info(data))

above ans1 the only map for the products and ans2 is products inside sizes map and ans3 will get error.

Upvotes: 0

Sushil Subedi
Sushil Subedi

Reputation: 74

<div className='products__sizes'>                    
      {products.sizes.map(size => (
          <li key={size.sku}>{size.size}</li>
      ))}
    </div>

I think this is where you have made mistake

Upvotes: 0

marquesm91
marquesm91

Reputation: 555

I think you just have a common mistake here. The size array is inside of each product data and not outside it.

Instead of trying to access it through procucts.size you have to do this instead

<div>
  { products.map(product => (
    <li key={product.id}>
      <img src={product.image} alt={product.name}></img>
      <strong>{product.name}</strong>
      <span>{product.regular_price}</span>
      <div className='products__sizes'>              
        { product.sizes && product.sizes.map(size => (
            <li key={size.sku}>{size.size}</li>
        ))}
      </div>
    </li>
  )) } 
</div>

Thats because size array are inside of each object inside root array.

Upvotes: 2

Related Questions