<div id="root"></div>
import React, { useState } from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";


const Item = (props) => {
  return (
    <li>
      <label>{props.children}</label>
      <input />
    </li>
  );
};

const MyApp = () => {
  const [list, setList] = useState(["Item 0"]);
  return (
    <>
      <button onClick={() => { setList([`Item ${list.length}`, ...list]); }}> Add </button>
      <ul>
        {list.map((item, index) => (
          <Item key={Math.random()}>
            {item + " "}
          </Item>
        ))}
      </ul>
    </>
  );
}

ReactDOM.render(<MyApp />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js