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 = "You now know how to render lists in Solid with `<For>`, but Solid also provides the `<Index>` component, which will cause less rerenders in certain situations.\n\nWhen the array updates, the `<For>` component uses referential equality to compare elements to the last state of the array and decide what to rerender. But this isn't always desired.\n\n\nWhen using `<For>` with primitive values (like strings and numbers) or arrays of arrays, we could cause a lot of unnecessary rendering. For example, if we used `<For>` to map a list of strings to an `<input>` field that could edit it, every change to that value would cause the `<input>` to be recreated. \n\nThe `<Index>` component is provided for these cases. As a rule of thumb, when working with primitives, use `<Index>`.\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\n It has a similar signature to `<For>`, except this time the item is the signal and the index is fixed. Each rendered node corresponds to a spot in the array. Whenever the data in that spot changes, the node will update.\n \n rather than an element changing placement, we're watching for an index to change its data.\n\n\n\n";
var flow_index = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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