Data list

OSCC · React, Components · Nov 3, 2020

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')
);

Recommended snippets

  • Data table

    React, Components

    Renders a table with rows dynamically created from an array of primitives.

  • Object table view

    React, Components

    Renders a table with rows dynamically created from an array of objects and a list of property names.

  • Stateful checkbox with multiple selection

    React, Components

    Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.