function LineItem(props) {
  return (
    <tr>
      <td>{props.year}</td>
      <td>{props.Model}</td>
      <td>{props.Price}</td>
      <td><button>Buy Now</button></td>
    </tr>
  );
}

function Header() {
  return <tr><th>Year</th><th>Model</th><th>Price</th><th>Buy</th></tr>;
}

function Item(props) {
  var namesList = props.rows.map(function(row) {
    return (
      <table>
        <Header /><LineItem year={row[0]} Model={row[1]} Price={row[2]} />
      </table>
    );
  });

  return (
    <div>
      <h2>{props.title}</h2>
      <ul>
        {namesList}
      </ul>
    </div>
  );
}

function Option(props) {
  return <option value={props.value}>{props.value}</option>;
}

function Types() {
  return (
    <select>
      <Option value="All" />
      <Option value="Cars" />
      <Option value="Trucks" />
      <Option value="Convertibles" />
    </select>
  );
}

ReactDOM.render(
  <div>
    <h2>Welcome to React Transportation</h2>
    <p>The best place to buy vehicles online</p>
    <h2>Choose Options</h2>
    <div>
      New Only
      <input
        type="checkbox"
        id="coding"
        name="interest"
        value="coding"
        checked
      />
    </div>
    <div>
      <Types />
    </div>

    <Item
      title="Cars"
      rows={[
        ["2013", "A", "$32000"],
        ["2011", "B", "$4400"],
        ["2016", "B", "$15500"]
      ]}
    />
    <Item
      title="Trucks"
      rows={[["2014", "D", "$18000"], ["2013", "E", "$5200"]]}
    />
    <Item
      title="Convertibles"
      rows={[
        ["2009", "F", "$2000"],
        ["2010", "G", "$6000"],
        ["2012", "H", "$12500"],
        ["2017", "M", "50000"]
      ]}
    />
  </div>,
  document.getElementById("root")
);