JSFiddle - React, Tailwind, and code Playground

JavaScript

// The collection of array in which these `mainList` and `sides-type` reference is inserted. 
// http://localhost/product-design/1
{
  "data": [
    {
      "id": 1,
      "main_type_id": 1,
      "sides_type_id": 1,
    }
  ]
}

// console.log(this.mainList)
data: [
  {
	"id": 1,
	"name": "Tshirt Print",
	"sides-type": [
	    {
	      "id": 1,
	      "name": "Front",
	    },
	    {
	      "id": 2,
	      "name": "Back",
	    },
	    {
	        "id": 3,
	        "name": "Left",
	    },
	    {
	        "id": 4,
	        "name": "Right",
	    },
   ]
  },
  {
    "id": 2,
    "name": "Mug Print",
    "sides-type": [],
  },
  {
    "id": 3,
    "name": "Pillow Print",
    "sides-type": [],
  },
]

// console.log(this.sidesList)
data: [
  {
	"id": 1,
	"name": "Tshirt Print",
	"sides-type": [
	    {
	      "id": 1,
	      "name": "Front",
	    },
	    {
	      "id": 2,
	      "name": "Back",
	    },
	    {
	        "id": 3,
	        "name": "Left",
	    },
	    {
	        "id": 4,
	        "name": "Right",
	    },
  }
]


//Records of `sides-type` array collection by id
// http://localhost/sides-type/1
{
  "data": [
    {
      "id": 1,
      "name": "Front",
    }
  ]
}