input field values not not what expected

Question

I have these input fields which first to be empty, second to actually grab the value of whatever the user does, third use to values to do some calculation.

import React, { Component } from 'react'

interface orderInformation {
    customer: number;
    picklePrice: number;
    breadPrice: number;
}

interface ComponentState
{
    customer: number;
    picklePrice: number;
    breadPrice: number;
    error: string;
    finalPickleCost: number;
    finalBreadCost: number;
}

export default class pickleSandwich extends Component<orderInformation,ComponentState> {


    constructor(props: orderInformation) {
        super(props);

        //initializing variables to undefined
        this.state = {
          customer: 0,
          picklePrice: 0,
          breadPrice: 0,
          finalBreadCost:0,
          finalPickleCost:0,
          error: ""
        };
        this.handleChange = this.handleChange.bind(this);
      }


//Get information for the user
    getInfo = orderInformation => {
        orderInformation.preventDefault();

        const { customer, picklePrice, breadPrice } = this.state;

        let pickleCounter = 0;
        let breadCounter = 0;
        if (customer > 0) {
            for(let i = 0; i < customer; i++)
            {
                if(i%3 == 0)
                {
                    pickleCounter = pickleCounter + 2;
                    breadCounter = breadCounter + 3;
                }
                else
                {
                    pickleCounter = pickleCounter + 1;
                    breadCounter = breadCounter + 2;
                }
                this.setState({
                    finalPickleCost: pickleCounter * picklePrice,
                    finalBreadCost: breadCounter * breadPrice,
                    error: ""
                });
            }

          } else {
            this.setState({
              error: "Please enter the values correctly."
            });
        console.log(this.state.customer);
        console.log(this.state.picklePrice);
        console.log(this.state.breadPrice);
        console.log(this.state.finalPickleCost);
        };

    };

    handleChange = e => {
        this.setState({ [e.target.name]: e.target.defaultValue } as any
            );
        };


render() {

   // const { customer, finalPickleCost, finalBreadCost } = this.state;

        return (
        <form onSubmit={this.getInfo}>
          <p>Get the information of the order!</p>
          <input
            type="text"
            id="customer"
            defaultValue="customer"
            placeholder="Amount of Customers"
            name="customer"
            onChange={this.handleChange}
            required
          />
          <input
            type="text"
            id="picklePrice"
            placeholder="Price of Pickle"
            defaultValue="picklePrice"
            name="picklePrice"
            onChange={this.handleChange}
            required
          />

          <input
            type="text"
            id="breadBrice"
            placeholder="Price of Bread"
            defaultValue="breadPrice"
            name="breadPrice"
            onChange={this.handleChange}
            required
          />
          <button type="submit">Get Information </button>

        </form>
        );
}
}

I have these input fields which first to be empty, second to actually grab the value of whatever the user does, third use to values to do some calculation.

Answer 1

A couple of notes:

• Use event.target.value not event.target.defaultValue, you will never get the updated data by using the latter.

• You need to map a component-state value for each input. ie: You already have an onChange setup, but the input never truly reflects the data in the component unless you do this.

• Additionally the defaultValues you provided would make more sense as <label> tags, since the input is expecting a number feed.

  See sandbox for reference: https://codesandbox.io/s/intelligent-dan-uskcy

Updated Component:

import React, { Component } from "react";

interface orderInformation {
  customer: number;
  picklePrice: number;
  breadPrice: number;
}

interface ComponentState {
  customer: number;
  picklePrice: number;
  breadPrice: number;
  error: string;
  finalPickleCost: number;
  finalBreadCost: number;
}

export default class pickleSandwich extends Component<
  orderInformation,
  ComponentState
> {
  constructor(props: orderInformation) {
    super(props);

    //initializing variables to undefined
    this.state = {
      customer: 0,
      picklePrice: 0,
      breadPrice: 0,
      finalBreadCost: 0,
      finalPickleCost: 0,
      error: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  //Get information for the user
  getInfo = orderInformation => {
    orderInformation.preventDefault();

    const { customer, picklePrice, breadPrice } = this.state;

    let pickleCounter = 0;
    let breadCounter = 0;
    if (customer > 0) {
      for (let i = 0; i < customer; i++) {
        if (i % 3 == 0) {
          pickleCounter = pickleCounter + 2;
          breadCounter = breadCounter + 3;
        } else {
          pickleCounter = pickleCounter + 1;
          breadCounter = breadCounter + 2;
        }
        this.setState({
          finalPickleCost: pickleCounter * picklePrice,
          finalBreadCost: breadCounter * breadPrice,
          error: ""
        });
      }
    } else {
      this.setState({
        error: "Please enter the values correctly."
      });
      console.log(this.state.customer);
      console.log(this.state.picklePrice);
      console.log(this.state.breadPrice);
      console.log(this.state.finalPickleCost);
    }
  };

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    const { finalPickleCost, finalBreadCost } = this.state;

    return (
      <div>
        <form onSubmit={this.getInfo}>
          <p>Get the information of the order!</p>
          <label>Customers</label>
          <input
            type="number"
            id="customer"
            placeholder="Amount of Customers"
            name="customer"
            onChange={this.handleChange}
            value={this.state.customer}
            required
          />
          <label>Pickles</label>
          <input
            type="number"
            id="picklePrice"
            placeholder="Price of Pickle"
            name="picklePrice"
            onChange={this.handleChange}
            value={this.state.picklePrice}
            required
          />
          <label>Bread</label>
          <input
            type="number"
            id="breadBrice"
            placeholder="Price of Bread"
            name="breadPrice"
            onChange={this.handleChange}
            value={this.state.breadPrice}
            required
          />
          <button type="submit">Get Information </button>
        </form>
        <div style={{ textAlign: "left", marginTop: "50px" }}>
          <div>
            <label>Final Pickle Cost: </label>
            {finalPickleCost}
          </div>
          <div>
            <label>Final Bread Cost: </label>
            {finalBreadCost}
          </div>
        </div>
      </div>
    );
  }
}

Answer 2

handleChange always sets the state of each input field to the default value so user input never takes effect. Set it to e.target.value instead.