30-seconds-of-code/react/snippets/data-list.md

title, type, tags, cover, dateModified

title	type	tags	cover	dateModified
Data list	snippet	components	interior-14	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.

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>;
};

const names = ['John', 'Paul', 'Mary'];
ReactDOM.createRoot(document.getElementById('root')).render(
  <>
    <DataList data={names} />
    <DataList data={names} isOrdered />
  </>
);