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

HTML Form: Menu list

This entry is part 10 of 10 in the series HTML Form

For situations where you have a long list of options, consider using menu or list.

A list can contain as many options as needed, yet it takes up very little space on the form.

To create a list, start with a two-sided <select> tag.  Within it, place each option in its own <option> tag.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Where would you like to go next?</p>

<form method='post'>
    <select name='country'>
        <option value='england'>England</option>
        <option value='brazil'>Brazil</option>
        <option value='malaysia'>Malaysia</option>
    </select>

</form>

</body>
</html>

 

HTML: Changing numbering for one item in the list

This entry is part 13 of 34 in the series HTML

You can use the value=’n’ attribute for an individual list item <li> if you want to change the numbering for one item only.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
</head>
<body>

<h4>British Pop</h4>
<ol start='11'>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
    <li value='21'>New Order</li>
</ol>

</body>
</html>
Numbering For One Item

HTML: Specifying the start of a numbered list

This entry is part 12 of 34 in the series HTML

To start a numbered list at a number other than 1, use the start=’n’ attribute with the <ol> tag, where n is the starting number.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
</head>
<body>

<h4>British Pop</h4>
<ol start='11'>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
    <li>New Order</li>
</ol>

</body>
</html>



Numbered List