First Webpage

HTML and CSS design part 1

by vdang84

JavaScript

import React from "react";
import PayerDropDown from "./PayerDropDown";

class AddLineItemForm extends React.Component {
  nameRef = React.createRef();
  priceRef = React.createRef();
  payerRef = React.createRef();
  owerRef = React.createRef();

/*   handleChange = event => {
    var options = event.target.options;
    let value = [];
  
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    console.log(value);
  };
   */
  createLineItem = event => {
    //1. stop the form from submitting
    event.preventDefault();
    const lineitem = {
      name: this.nameRef.value.value,
      price: parseFloat(this.priceRef.value.value),
      payer: this.payerRef.value.value,
      ower: this.owerRef.value.value
    };

    this.props.addLineItem(lineitem);
    // refresh the form
    event.currentTarget.reset();
  };
  render() {
    const { friend } = this.props;
    return (
      <form className="fish-edit" onSubmit={this.createLineItem}>
        <input
          name="name"
          ref={this.nameRef}
          type="text"
          placeholder="Line Item"
        />
        <input
          name="price"
          ref={this.priceRef}
          type="text"
          placeholder="Price"
        />
        <select name="payer" ref={this.payerRef}>
          <option disabled selected value="">
            Payer
          </option>
          {(friend || []).map((f, i) => (
            <option key={i} value={f.name}>
              {f.name}
            </option>
          ))}
        </select>
        <select
          multiple={true}
          name="ower"
          ref={this.owerRef}
          onChange={this.handleChange}>
          <option disabled selected value="">
            Ower1
          </option>
          {(friend || []).map((f, i) => (
            <option key={i} value={f.name}>
              {f.name}
            </option>
          ))}
        </select>
        <button...