var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Index } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n    { id: 'z_AbfPXTKms', name: 'Maru' },\n    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n  ]);\n  \n  return (\n    <ul>\n      <li>\n        <a target=\"_blank\" href=\"\">\n          1: Garfield\n        </a>\n      </li>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Index } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n    { id: 'z_AbfPXTKms', name: 'Maru' },\n    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n  ]);\n  \n  return (\n    <ul>\n      <Index each={cats()}>{(cat, i) =>\n        <li>\n          <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat().id}`}>\n            {i + 1}: {cat().name}\n          </a>\n        </li>\n      }</Index>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "Manchmal macht es Sinn, referenzielle Vergleiche zu verwenden, um Reihen zu vergleichen. Wenn man mit einfachen Werten oder verschachtelten Arrays arbeitet, kann die Verwendung der Werte als Vergleichsschlüssel zu unnötigem Rendering führen. Wenn wir beispielsweise eine Liste von Strings zu einem input-Feld transformieren würden, das diesen Wert im Array bearbeiten kann, würde jede Änderung des Werts dazu führen, dass das Input neu gerendert wird, da es als eindeutiger Identifikator gesehen wird.\n\nIn diesen Fällen ist konzeptuell der Array-Index der Schlüssel zu der Liste. Dafür hat Solid die `<Index>`-Komponente.\n\n`<Index>` hat eine vergleichbare Funktionssignatur wie `<For>`, außer dass diesmal der Wert das Signal ist und der Index fest.\n\n```jsx\n<Index each={cats()}>{(cat, i) =>\n  <li>\n    <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat().id}`}>\n      {i + 1}: {cat().name}\n    </a>\n  </li>\n}</Index>\n```\n";
var flow_index = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { flow_index as default, lesson, markdown, solved };
