Menu

gitpiper

DataList react Code Snippet in 2023

componentsbeginner

Last Updated: 1 March 2023

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.render(<DataList data={names} />, document.getElementById('root')); ReactDOM.render( <DataList data={names} isOrdered />, document.getElementById('root') );

react snippet similar to DataList For You in February 2023

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2023 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️