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: ["The ", jsx(_components.code, {
        children: "<For>"
      }), " component is the best way to loop over an array of objects. As the array changes, ", jsx(_components.code, {
        children: "<For>"
      }), " updates or moves items in the DOM rather than recreating them. Let's look at an example."]
    }), "\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: ["There is one prop on the ", jsx(_components.code, {
        children: "<For>"
      }), " component: ", jsx(_components.code, {
        children: "each"
      }), ", where you pass the array to loop over."]
    }), "\n", jsxs(_components.p, {
      children: ["Then, instead of writing nodes directly between ", jsx(_components.code, {
        children: "<For>"
      }), " and ", jsx(_components.code, {
        children: "</For>"
      }), ", you pass a ", jsx(_components.em, {
        children: "callback"
      }), ". This is a function similar to JavaScript's ", 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"]
      }), ". For each element in the array, the callback is called with the element as the first argument and the index as the second. (", jsx(_components.code, {
        children: "cat"
      }), " and ", jsx(_components.code, {
        children: "i"
      }), " in this example.) You can then make use of those in the callback, which should return a node to be rendered."]
    }), "\n", jsxs(_components.p, {
      children: ["Note that the index is a ", jsx(_components.em, {
        children: "signal"
      }), ", not a constant number. This is because ", jsx(_components.code, {
        children: "<For>"
      }), " is \"keyed by reference\": each node that it renders is coupled to an element in the array. In other words, if an element changes placement in the array, rather than being destroyed and recreated, the corresponding node will move too and its index will change."]
    }), "\n", jsxs(_components.p, {
      children: ["The ", jsx(_components.code, {
        children: "each"
      }), " prop expects an array, but you can turn other iterable objects into arrays with utilities like ", 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"
        })
      }), ", or ", 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-cad387d2.js.map
