I'm new to React.js ,I'm creating a new application using react hooks, I get data from API and set it to state using setProductTypes() and then when i reading the that sate value productTypes.length it not showing the values (observed it from debugger), I display data based on that and it shows the data .

```
import React, { useState, useEffect } from "react";
import ProductTypeDataService from "../../services/ProductTypeService";
import Card from 'react-bootstrap/Card'
import { CardGroup } from "react-bootstrap";

const ProductTypeList = () => {

    const [productTypes, setProductTypes] = useState([]);
    const [nestedArray, setNestedArray]= useState([]);

    useEffect(() => {
      debugger ;
        retrieveTutorials();
      },[]);

    const retrieveTutorials = () => {
        ProductTypeDataService.getAll()
          .then(response => {
            setProductTypes(response.data);
            createNestedArray();;

          })
          .catch(e => {
            console.log(e);
          });
      };

      const createNestedArray= ()=>{

        var arr = new Array([]);

        var arrayLength = productTypes.length;
        for (var i = 0; i < arrayLength; i+4) {          
          for (var k = 0; k < 4; k++) {       
            arr[i,k] =productTypes[i+k];         
          }         
        }
        setNestedArray(arr);
        console.log(nestedArray);
      };

    return (
      <div className="col-md-6">
        <h4>Product Type List</h4>

        <CardGroup>
          {productTypes &&
            productTypes.map((productType, index) => (
              <Card>
              <Card.Body>
              <Card.Img variant="top" src={productType.imageUrl} />
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">{productType.name}</small>
              </Card.Footer>
            </Card>             
            ))}
        </CardGroup>
        </div>
    )
}

export default ProductTypeList

```