Acessar props com map (variações de tamanho de um produto)

Front-end
#1

Olá, pessoal. sou iniciante no react e estou tentando acessar as propriedades de tamanho de um produto através de um map. A API devolve:

{
    "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)"
            }
        ]
}

o map inicial com info dos produtos deu certinho. mas o segundo map de tamanho (size) falhou. o que posso estar fazendo de errado?

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>

    

    
   </>
  )
 
}
}
#2

é pq vc criou um outro array, uma forma de vc acessar isso é entrar nesse array aí, tipo:

sizes[0].size
#3

Se products for um array, acredito que vc deveria acessar o atributo sizes a partir de um objeto desse array:

products[index].sizes

ou

products.map(product => product.sizes.map(size => /* faz algo */));
1 curtida