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"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Wenn man über eine Liste iterieren möchte, ist die ", jsx(_components.code, {
        children: "<For>"
      }), "-Komponente der beste Weg für jedes Array von Werten, die nicht Daten-Primitiven sind. Es wird automatisch nach Referenz indiziert, so dass während Aktualisierungen bei Verschiebung von Daten die korrespondierenden Reihen ebenfalls Verschoben statt gelöscht und neu erstellt werden. Das Callback, welches als Kind Verwendet wird, wird nicht reaktiv verfolgt und übergibt den jeweiligen Wert und seinen Index als Signal."]
    }), "\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: ["Der ", jsx(_components.code, {
        children: "index"
      }), " ist ein Signal und kann daher unabhängig vom Wert aktualisiert werden, wenn dieser verschoben wird. Wäre der Wert kein Signal, würde dieser eine neue Referenz erhalten, was dazu führen würde, dass die Elemente neu gerendert statt verschoben werden würden. Um verschachtelte Updates zu machen, verwende man verschachtelte Signale oder den Store-Proxy."]
    }), "\n", jsxs(_components.p, {
      children: ["Man kann ", jsx(_components.code, {
        children: "<For>"
      }), " auch verwenden, über andere iterierbare Objekte zu iterieren, die keine Arrays sind, indem man Methoden wie ", jsx(_components.code, {
        children: "Object.keys"
      }), " oder einfach den Spread-Operator zur Umwandlung in ein Array verwendet, etwa so: ", jsx(_components.code, {
        children: "[...iterable]"
      }), "."]
    })]
  });
}
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-a757ad74.js.map
