30-seconds-of-code/snippets/MappedList.md

MappedList

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 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. Omit the isOrderedList prop to render a <ul> list by default.

function MappedList(props) {
  return props.isOrderedList ?
    <ol>
      {props.data.map((v,i) => <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>)}
    </ol> :
    <ul>
      {props.data.map((v,i) => <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>)}
    </ul>
};

const names = ['John', 'Paul', 'Mary'];
ReactDOM.render(<MappedList data={names}/>, document.getElementById('root'));
const users = [ { id: 8, value: 'john' }, { id: 3, value: 'paul' }];
ReactDOM.render(<MappedList data={users} isOrderedList/>, document.getElementById('root'));