JSFiddle - React, Tailwind, and code Playground

by Konstantin Cryman

JavaScript

const testJSON = { "parentTypeExample": {

    "parentType": "decoration_stitch5inc_diagonal_l_knee",
  
    "title": "location",
    "id": "loc5sl",
    "hidden_mesh": [],

    "optionsDiff": {

      "replace": [
        {
          "sku": "plo5tdlk",
          "changes": {
            "next_option": "decorating_stitch2",
            "price": "15"
          }
        }
      ],

      "remove": [
        {
          "sku": "plo5tdlk",
          "changes": {
            "avaliable_color_meshes": [
              "diagonal_leg L_color_stripes_knee_3_back"
            ]
          }
        }
      ],

      "add": [
        {
          "sku": "plo5tdlk",
          "changes": {
              "model": {
                "show_mesh": [
                  "diagonal_leg L_Leg_cuted2"
                ]
              }
          }
        }
      ]
    }
  },

  "decoration_stitch5inc_diagonal_l_knee-stitchOn": {
    
  },

  "decoration_stitch5inc_diagonal_l_knee-stitchOff": {
    
  },
  "decoration_stitch5inc_diagonal_l_knee": {
    "title": "location",
    "id": "loc5sl",
    "hidden_mesh": [],
    "options": [
      {
        "image" : "./icons/5 CM-01.jpg",
        "title": "both",
        "sku": "plo5tdlk",
        "price": "0",
        "next_option": "decorating_stitch",
        "avaliable_color_meshes": [
          "diagonal_leg L_color_stripes_knee_3_back",
          "diagonal_leg L_color_stripes_knee_3_front",
          "diagonal_leg L_color_stripes_knee_5_back",
          "diagonal_leg L_color_stripes_knee_5_front"
        ],

        "model": {
          "shown_mesh": [
            "seem",
            "diagonal_leg L_Leg_cuted",
            "diagonal_leg L_Leg_for_pocket_hide",
            "diagonal_leg R_Leg_cuted",
            "diagonal_leg R_Leg_for_pocket_hide",
            "diagonal_leg L_color_stripes_calf_3_back",
            "diagonal_leg L_color_stripes_calf_3_front",
            "diagonal_leg R_color_stripes_calf_3_back",
            "diagonal_leg...