{"id":28404873,"url":"https://github.com/coxcore/react-loop-item","last_synced_at":"2026-04-29T10:33:49.618Z","repository":{"id":46622929,"uuid":"314783912","full_name":"coxcore/react-loop-item","owner":"coxcore","description":"A simple component that repeatedly creates components.","archived":false,"fork":false,"pushed_at":"2022-12-01T16:18:55.000Z","size":284,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T00:43:18.381Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coxcore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-21T10:15:57.000Z","updated_at":"2021-10-05T11:33:34.000Z","dependencies_parsed_at":"2023-01-22T14:00:30.479Z","dependency_job_id":null,"html_url":"https://github.com/coxcore/react-loop-item","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/coxcore/react-loop-item","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxcore%2Freact-loop-item","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxcore%2Freact-loop-item/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxcore%2Freact-loop-item/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxcore%2Freact-loop-item/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coxcore","download_url":"https://codeload.github.com/coxcore/react-loop-item/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxcore%2Freact-loop-item/sbom","scorecard":{"id":306326,"data":{"date":"2025-08-11","repo":{"name":"github.com/coxcore/react-loop-item","commit":"93a719d4c2e27445b57048be3a7fbe37eefe95e2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 0/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"77 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T22:08:43.313Z","repository_id":46622929,"created_at":"2025-08-17T22:08:43.313Z","updated_at":"2025-08-17T22:08:43.313Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32421913,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T06:29:02.080Z","status":"ssl_error","status_checked_at":"2026-04-29T06:29:00.631Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-01T21:07:19.270Z","updated_at":"2026-04-29T10:33:49.613Z","avatar_url":"https://github.com/coxcore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-loop-item\n\n\u003e A simple component that repeatedly creates components.\n\n[![NPM](https://img.shields.io/npm/v/react-loop-item.svg)](https://www.npmjs.com/package/react-loop-item) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install react-loop-item --save\n```\n\nor\n\n```bash\nyarn add react-loop-item\n```\n\n## Usage\n\n### `\u003cLoopItem\u003e`\n\n```jsx\nimport { LoopItem } from \"react-loop-item\";\n\nconst Articles = () =\u003e {\n  // [list]: \u003cItem\u003e props\n  const itemProps = [\n    { contents: \"1. Article sample A\" },\n    { contents: \"2. Article sample B\" },\n  ];\n\n  return \u003cLoopItem target={Item} list={itemProps} /\u003e;\n};\n\n// [target]: Item component of list\nconst Item = ({ contents }) =\u003e \u003cp\u003e{contents}\u003c/p\u003e;\n```\n\n### `\u003cListWrap\u003e`\n\n\u003e `[version] ^1.1.0`\n\n```jsx\nimport { ListWrap } from \"react-loop-item\";\n\nconst Articles = () =\u003e {\n  // [list]: \u003cItem\u003e props\n  const itemProps = [\n    { contents: \"1. Article sample A\" },\n    { contents: \"2. Article sample B\" },\n  ];\n\n  return (\n    \u003cListWrap\n      // List tag\n      tag=\"ul\"\n      className=\"ul-class\"\n      data-description=\"Add any ul attributes\"\n      // \u003cLoopItem\u003e props\n      target={Item}\n      list={itemProps}\n    /\u003e\n  );\n};\n\n// [target]: Item component of list\nconst Item = ({ contents }) =\u003e \u003cli\u003e{contents}\u003c/li\u003e;\n```\n\n### `loop()`\n\n```jsx\nimport { LoopItem, loop } from \"react-loop-item\";\n\nloop(Item, list, each, instead, hidden, memo);\n// or\n\u003cLoopItem\n  target={Item}\n  list={arr}\n  each={fnc}\n  instead={element}\n  hidden={boolean}\n  memo={boolean}\n/\u003e;\n```\n\n## Props\n\n### target (required)\n\n\u003e `[type] elementType(React.Component, React.FC, React.forwardRef, string)`\n\nComponent to be created repeatedly.\n\n```jsx\n// Component\n\u003cLoopItem target={ItemComponent} /\u003e;\n\n// Tag name\n\u003cLoopItem target={\"img\"} /\u003e;\n```\n\n### list (optional)\n\n\u003e `[type] Array | number`\n\nItem data array or number of items.\n\n```jsx\n// Array\n\u003cLoopItem target={Item} list={[{ foo: \"bar\" }, { foo: \"bar\" }]} /\u003e;\n\n// Count\n\u003cLoopItem target={Item} list={5} /\u003e;\n```\n\n### each (optional)\n\n\u003e `[type] Function`\n\nCallback function that converts each element of `list` to props for `target` when rendering `target` component.\nIf `each` is omitted, `list` element is used as it is.\n\n\u003e `each` has two arguments. (element and index of `list`)\n\n```jsx\n// [list]: Raw datas\nconst model = [{ foo: \"bar\" }, { foo: \"bar\" }];\n\n// [each]: Formatter for \u003cAnchor\u003e props\nconst getProps = (data, index) =\u003e ({\n  // Properties\n  value: data.foo,\n  // Callbacks\n  onClick: (event) =\u003e {\n    event.preventDefault();\n    console.log(model, data, index);\n  },\n});\n\n// [target]: \u003cAncher\u003e has value and onClick\nconst Anchor = ({ value, onClick }) =\u003e (\n  \u003ca href=\"#\" onClick={onClick}\u003e\n    {value}\n  \u003c/a\u003e\n);\n\n\u003cLoopItem target={Anchor} list={model} each={getProps} /\u003e;\n```\n\n### tag (optional)\n\n\u003e `[type] string`, `[version] ^1.1.0`, `[for] ListWrap`\n\nSet tag name of parent element to wrap items.\n\n```jsx\n\u003cListWrap tag=\"div\" className=\"tag-example\" target={Child} list={model}\u003e /\u003e\n// or\n\u003cdiv className=\"tag-example\"\u003e\n  \u003cLoopItem target={Child} list={model}\u003e\n\u003c/div\u003e\n```\n\n### instead (optional)\n\n\u003e [type] React.ReactNode\n\nElement to return instead of null when `list` is empty. Use strings or element, no component.\n\n\u003e target={Component} instead={strings or element}\n\n```jsx\n// [list] : No data\nconst model = [];\n\n// [instead]: Element to render instead of blank\nconst noData = \u003cspan\u003eno data\u003c/span\u003e;\n\n// Do not use component\n// const noData = () =\u003e \u003cspan\u003eno data\u003c/span\u003e;\n\n\u003cLoopItem target={Item} list={model} instead={noData} /\u003e;\n```\n\n### hidden (optional)\n\n\u003e `[type] boolean`\n\nPrevent rendering.\n\n```jsx\n\u003cLoopItem target={Item} list={model} hidden /\u003e\n// or\n\u003cLoopItem target={Item} list={model} hidden={true} /\u003e\n```\n\n### memo (optional)\n\n\u003e `[type] string | boolean`, `[version] ^1.1.2`\n\nWhether to cache `target` using `React.memo`.\n\nTo use this feature, enter prop name of `target` you want to use as `key` in list, or `true`.\nUse it when absolutely necessary. Frequent use of `React.memo` is not recommended.\n\n```jsx\n\u003cLoopItem target={Item} list={model} memo=\"id\" /\u003e\n// or\n\u003cLoopItem target={Item} list={model} memo={true} /\u003e\n```\n\n## Examples\n\n### AnchorList.jsx\n\n```jsx\nimport React from \"react\";\nimport { ListWrap } from \"react-loop-item\";\n\nimport style from \"./AnchorList.module.css\";\n\n// \u003cAnchorList\u003e needs raw data array and \u003cItem\u003e props formatter.\nconst AnchorList = ({ list, each }) =\u003e (\n  \u003cListWrap\n    tag=\"ul\"\n    className={style[\"ul-style\"]}\n    target={Item}\n    list={list}\n    each={each}\n    instead={noData}\n  /\u003e\n);\n\n// Check target props\nconst Item = ({ label, href, onClick }) =\u003e (\n  \u003cli className={style[\"li-style\"]}\u003e\n    \u003ca href={href} onClick={onClick}\u003e\n      {label}\n    \u003c/a\u003e\n  \u003c/li\u003e\n);\n\n// What to display instead of the \u003cul\u003e\nconst noData = \u003cdiv\u003eno data\u003c/div\u003e;\n\nexport default AnchorList;\n```\n\n### Tags.jsx\n\n```jsx\nimport React from \"react\";\nimport { LoopItem } from \"react-loop-item\";\n\nimport style from \"./Tags.module.css\";\n\n// If you already know about raw datas,\n// define \u003cItem\u003e props formatter in this component.\nconst Tags = ({ list }) =\u003e (\n  \u003cp className={style[\"p-style\"]}\u003e\n    \u003cLoopItem target={Item} list={list} each={getProps} /\u003e\n  \u003c/p\u003e\n);\n\nconst Item = ({ value }) =\u003e (\n  \u003cspan className={style[\"span-style\"]}\u003e{value}\u003c/span\u003e\n);\n\n// Convert string to \u003cItem\u003e props\nconst getProps = (text, index) =\u003e ({\n  value: text,\n});\n\nexport default Tags;\n```\n\n### ListContainer.jsx\n\n```jsx\nimport React from \"react\";\nimport AnchorList from \"./AnchorList\";\nimport Tags from \"./Tags\";\n\nconst ListContainer = () =\u003e {\n  // \u003cAnchorList\u003e raw datas\n  const siteList = [\n    { url: \"aaa.com\", description: \"aaa site\", visited: 4 },\n    { url: \"bbb.com\", description: \"bbb site\", visited: 2 },\n    { url: \"ccc.com\", description: \"ccc site\", visited: 8 },\n  ];\n\n  // Formatter for \u003cItem\u003e props of \u003cAnchorList\u003e\n  const getProps = (data, index) =\u003e {\n    // raw datas (element and index of siteList)\n    const { url, description, visited } = data;\n\n    // Props\n    return {\n      key: url, // If key is omitted, index is used\n      label: description,\n      href: url,\n      onClick(event) {\n        event.preventDefault();\n        console.log(siteList, index, visited);\n      },\n    };\n  };\n\n  // \u003cTags\u003e raw datas\n  const tagList = [\"react\", \"loop\", \"for\", \"each\", \"list\"];\n\n  return (\n    \u003cdiv\u003e\n      {/* Your components */}\n      \u003cAnchorList list={siteList} each={getProps} /\u003e\n      \u003cTags list={tagList} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ListContainer;\n```\n\n## Tips\n\n### Injecting Callbacks\n\nIf the structure of the raw data is fixed, the component using `LoopItem` defines props a formatter for the list item component.\nThen use the parent component's state or props to develop functions to use as callback.\n\n```jsx\nimport React from \"react\";\nimport AnchorList from \"./AnchorList\";\n\nconst ListContainer = () =\u003e {\n  // Code to manage model\n  // ...\n\n  const updateVisited = (url, count) =\u003e {\n    // Do something for updating model\n  };\n\n  // Callbacks injector for \u003cItem\u003e of \u003cAnchorList\u003e\n  const getItemCallbacks = (data, index) =\u003e {\n    const { url, description, visited } = data;\n\n    // Callbacks\n    return {\n      onClick(event) {\n        event.preventDefault();\n\n        // Update visited\n        updateVisited(url, visited + 1);\n      },\n    };\n  };\n\n  return (\n    \u003cdiv\u003e\n      {/* Your component */}\n      \u003cAnchorList list={model} each={getItemCallbacks} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ListContainer;\n```\n\n```jsx\nimport React from \"react\";\nimport { LoopItem } from \"react-loop-item\";\n\nimport style from \"./AnchorList.module.css\";\n\n// \u003cAnchorList\u003e needs raw datas and \u003cItem\u003e callbacks injector.\nconst AnchorList = ({ list, each }) =\u003e {\n  // Formatter for \u003cItem\u003e props\n  const getItemProps = (data, index) =\u003e {\n    const { url, description, visited } = data;\n\n    return {\n      // Properties\n      key: url,\n      href: url,\n      label: description,\n\n      // Inject \u003cItem\u003e callbacks\n      ...each(data, index),\n    };\n  };\n\n  return (\n    \u003cul className={style[\"ul-style\"]}\u003e\n      \u003cLoopItem target={Item} list={list} each={getItemProps} /\u003e\n    \u003c/ul\u003e\n  );\n};\n\n// Check target props\nconst Item = ({ label, href, onClick }) =\u003e (\n  \u003cli className={style[\"li-style\"]}\u003e\n    \u003ca href={href} onClick={onClick}\u003e\n      {label}\n    \u003c/a\u003e\n  \u003c/li\u003e\n);\n\nexport default AnchorList;\n```\n\n### Rendering Optimization\n\nIf rendering optimization is required, set the `memo` option.\n\nFor this to work smoothly, you need to manage the elements of the `list` as immutable objects. And make sure the references to the `each` callback don't change.\n\n```jsx\nimport React, { useReducer, useCallback } from \"react\";\nimport { ListWrap } from \"react-loop-item\";\n\n// Demo data\nconst siteList = [\n  { url: \"aaa.com\", description: \"aaa site\", visited: 4 },\n  { url: \"bbb.com\", description: \"bbb site\", visited: 2 },\n  { url: \"ccc.com\", description: \"ccc site\", visited: 8 },\n];\n\n// List reducer\nconst reducer = (state, url) =\u003e\n  state.map((item) =\u003e\n    // Returns new object only if it is a target.\n    item.url !== url\n      ? item\n      : {\n          ...item,\n          visited: item.visited + 1,\n        }\n  );\n\nconst MemoList = () =\u003e {\n  // Visit is dispatch\n  const [list, visit] = useReducer(reducer, siteList);\n\n  // Cached each\n  const each = useCallback(\n    (data, index) =\u003e ({\n      ...data,\n      onClick(event) {\n        event.preventDefault();\n        visit(data.url);\n      },\n    }),\n    [visit] // Visit does not change the reference\n  );\n\n  // Try changing memo\n  return (\n    \u003cListWrap tag=\"ul\" target={Anchor} list={list} each={each} memo=\"url\" /\u003e\n  );\n};\n\nconst Anchor = ({ url, description, visited, onClick }) =\u003e {\n  // Check rendering\n  console.log(\"rendering!\", url);\n  return (\n    \u003cli\u003e\n      \u003ca href={url} onClick={onClick}\u003e\n        {description}({visited})\n      \u003c/a\u003e\n    \u003c/li\u003e\n  );\n};\n\nexport default MemoList;\n```\n\n## License\n\nMIT © [coxcore](https://github.com/coxcore)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoxcore%2Freact-loop-item","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoxcore%2Freact-loop-item","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoxcore%2Freact-loop-item/lists"}