Update data snippets

snippets/DataList.md

@@ -1,16 +1,15 @@
 ---
 title: DataList
-tags: components,array,beginner
+tags: components,beginner
 ---
 
 Renders a list of elements from an array of primitives.
 
-- Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
+- 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, give it a `key` produced from the concatenation of the its index and value.
+- Use `Array.prototype.map()` to render every item in `data` as a `<li>` element with an appropriate `key`.
-- Omit the `isOrdered` prop to render a `<ul>` list by default.
 
 ```jsx
-const DataList = ({ isOrdered, data }) => {
+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>;
 };
@@ -19,5 +18,8 @@ const DataList = ({ isOrdered, data }) => {
 ```jsx
 const names = ['John', 'Paul', 'Mary'];
 ReactDOM.render(<DataList data={names} />, document.getElementById('root'));
-ReactDOM.render(<DataList data={names} isOrdered />, document.getElementById('root'));
+ReactDOM.render(
+  <DataList data={names} isOrdered />,
+  document.getElementById('root')
+);
 ```

snippets/DataTable.md

@@ -1,12 +1,12 @@
 ---
 title: DataTable
-tags: components,array,beginner
+tags: components,beginner
 ---
 
 Renders a table with rows dynamically created from an array of primitives.
 
 - Render a `<table>` element with two columns (`ID` and `Value`).
-- Use `Array.prototype.map()` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.
+- Use `Array.prototype.map()` to render every item in `data` as a `<tr>` element with an appropriate `key`.
 
 ```jsx
 const DataTable = ({ data }) => {