ReactJS: Simple List

This entry is part 32 of 35 in the series React JS

See the Pen React List by sean (@viiiprock) on CodePen.

const List = props => {
  const ComponentToRender = props.component;
  let content = <div />;

  if (props.items) {
    content = props.items.map((item, index) => (
      <ComponentToRender key={`item-${index}`} {...item} />
    ));
  } else {
    content = <ComponentToRender />;
  }

  return <ul>{content}</ul>;
};

const ListItem = props => (
  <li>
    <a href={props.href}>
      <i className={props.icon} />
      {props.name}
    </a>
  </li>
);

const items = [
  { href: "#", icon: "fa fa-phone", name: "bannana" },
  { href: "#", icon: "fa fa-phone", name: "apples" }
];

ReactDOM.render(
  <div>
    <List component={ListItem} items={items} />
  </div>,
  document.getElementById("app")
);
Series Navigation<< ReactJS: Radio button and show selected
ReactJS: Change Color Simple Component >>