Update data snippets
This commit is contained in:
@ -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 `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.
|
||||
- Omit the `isOrdered` prop to render a `<ul>` list by default.
|
||||
- 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, 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')
|
||||
);
|
||||
```
|
||||
|
||||
@ -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 }) => {
|
||||
|
||||
Reference in New Issue
Block a user