var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, For } 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, For } 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      <For 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      }</For>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "If you want to iterate over an array, the `<For>` component is the best way for any array of non-primitive values. It is automatically keyed by reference, so as data updates it is optimized to update or move rows rather than recreate them. Let's look at an example. \n\n```jsx\n<For 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}</For>\n```\n\nThe `<For>` component takes an `each` prop, where you pass the array to loop over.\n\nThen, instead of writing nodes directly between `<For>` and `<For/>`, you a pass a _callback_. This is a function similar to JavaScript's [`map` callback](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#parameters). For each element in the array, the callback is called with the element as the first argument and the index as the second. (`cat` and `i()` in this example.) You can then make use of those in the callback, returning a node to render corresponding to that element.\n\nNote that the `index` is a _signal_, not a literal number. This is because `<For>` is \"keyed by reference\": each node that it renders corresponds to an element in the array, not to an index. If an element changes placement in the array, the corresponding rendered nodes will move too, rather than being destroyed and rerendered.\n\nThe `each` prop expects an array, but you can turn other iterable objects into arrays with utilities like [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), [`Object.keys`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys), or [spread syntax](`https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax`).";
var flow_for = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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