Kebab file names

snippets/data-list.md

@@ -0,0 +1,29 @@
+---
+title: Data list
+tags: components
+cover: interior-14
+firstSeen: 2018-11-29T12:12:24+02:00
+lastUpdated: 2020-11-03T21:26:34+02:00
+---
+
+Renders a list of elements from an array of primitives.
+
+- Use the value of the `isOrdered` prop to conditionally render an `<ol>` or a `<ul>` list.
+- Use `Array.prototype.map()` to render every item in `data` as a `<li>` element with an appropriate `key`.
+
+```jsx
+const DataList = ({ isOrdered = false, data }) => {
+  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);
+  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
+};
+```
+
+```jsx
+const names = ['John', 'Paul', 'Mary'];
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <>
+    <DataList data={names} />
+    <DataList data={names} isOrdered />
+  </>
+);
+```