Update MappedList.md
This commit is contained in:
@ -2,17 +2,17 @@
|
|||||||
|
|
||||||
Renders a list of elements from an array of data.
|
Renders a list of elements from an array of data.
|
||||||
|
|
||||||
Use the value of the `isOrderedList` prop to conditionally render a `<ol>` or `<ul>` list.
|
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 and give it a `key`.
|
Use `Array.prototype.map` to render every item in `data` as a `<li>` element and give it a `key`.
|
||||||
`data` can either be an array of objects with the `id` and `value` properties or an array of primitives.
|
`data` can either be an array of objects with the `id` and `value` properties or an array of primitives.
|
||||||
Omit the `isOrderedList` prop to render a `<ul>` list by default.
|
Omit the `isOrdered` prop to render a `<ul>` list by default.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
function MappedList({ isOrderedList, data }) {
|
function MappedList({ isOrdered, data }) {
|
||||||
const list = data.map((v, i) => (
|
const list = data.map((v, i) => (
|
||||||
<li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
|
<li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
|
||||||
));
|
));
|
||||||
return isOrderedList ? <ol>{list}</ol> : <ul>{list}</ul>;
|
return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ const names = ['John', 'Paul', 'Mary'];
|
|||||||
ReactDOM.render(<MappedList data={names}/>, document.getElementById('root'));
|
ReactDOM.render(<MappedList data={names}/>, document.getElementById('root'));
|
||||||
const users = [ { id: 8, value: 'john' }, { id: 3, value: 'paul' }];
|
const users = [ { id: 8, value: 'john' }, { id: 3, value: 'paul' }];
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<MappedList data={users} isOrderedList />,
|
<MappedList data={users} isOrdered />,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user