Data list
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 indata
as a<li>
element with an appropriatekey
.
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 /> </> );