import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span",
    em: "em",
    a: "a"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Komponen ", jsx(_components.code, {
        children: "<For>"
      }), " adalah cara terbaik untuk melakukan pengulangan array objek. Saat array berubah, ", jsx(_components.code, {
        children: "<For>"
      }), " akan memperbarui atau memindahkan item di DOM daripada membuatnya ulang. Mari kita lihat contoh berikut ini."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "For"
        }), " each={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "cats"
        }), "()}>{", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "cat, i"
          }), ") =>"]
        }), "\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "a"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "target"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"_blank\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "href"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{"
            }), "`", jsx(_components.span, {
              className: "hljs-attr",
              children: "https:"
            }), "//", jsx(_components.span, {
              className: "hljs-attr",
              children: "www.youtube.com"
            }), "/", jsx(_components.span, {
              className: "hljs-attr",
              children: "watch"
            }), "?", jsx(_components.span, {
              className: "hljs-attr",
              children: "v"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "${cat.id}"
            }), "`}>"]
          }), "\n      {i() + 1}: {cat.name}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "a"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          })]
        }), "\n}</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "For"
        }), ">\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Komponen ", jsx(_components.code, {
        children: "<For>"
      }), " memiliki satu properti yang disebut ", jsx(_components.code, {
        children: "each"
      }), ", tempat kamu memberikan array untuk diulang."]
    }), "\n", jsxs(_components.p, {
      children: ["Kemudian, alih-alih menulis node secara langsung antara ", jsx(_components.code, {
        children: "<For>"
      }), " dan ", jsx(_components.code, {
        children: "</For>"
      }), ", kamu akan memberikan ", jsx(_components.em, {
        children: "callback"
      }), ". Ini adalah fungsi yang mirip dengan ", jsxs(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#parameters",
        children: [jsx(_components.code, {
          children: "map"
        }), " callback"]
      }), " pada JavaScript. Untuk setiap elemen dalam array, callback dipanggil dengan elemen sebagai argumen pertama dan indeks sebagai argumen kedua. (dalam contoh ini adalah ", jsx(_components.code, {
        children: "cat"
      }), " dan ", jsx(_components.code, {
        children: "i"
      }), ".) Kemudian kamu dapat menggunakan mereka yang ada di callback, yang akan mengembalikan node yang akan dirender."]
    }), "\n", jsxs(_components.p, {
      children: ["Perlu diingat bahwa indeks adalah ", jsx(_components.em, {
        children: "signal"
      }), ", bukan konstanta. Ini karena ", jsx(_components.code, {
        children: "<For>"
      }), " \"dikunci dengan referensi\": setiap node yang dirender akan digabungkan ke elemen dalam array. Dengan kata lain, jika sebuah elemen mengubah penempatan dalam array, daripada dihancurkan dan dibuat ulang, node yang sesuai akan bergerak dan indeksnya akan berubah."]
    }), "\n", jsxs(_components.p, {
      children: ["Prop ", jsx(_components.code, {
        children: "each"
      }), " mengharapkan array, tetapi kamu dapat mengubah objek iterable lainnya menjadi array dengan utilitas seperti ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from",
        children: jsx(_components.code, {
          children: "Array.from"
        })
      }), ", ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys",
        children: jsx(_components.code, {
          children: "Object.keys"
        })
      }), ", atau ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax",
        children: jsx(_components.code, {
          children: "spread syntax"
        })
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-7b16f733.js.map
