title: "Cannot read property 'value' of undefined" error while submitting form data to my API in Reactjs
body: <p>I'm using a Multi-step form to post the form data to my API. But I'm facing an issue while submitting the data. I do not understand how to use props to send the child component data to my parent component.</p>
  
  <p>This is my parent component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import StepOne from "views/StepOne";
  import StepTwo from "views/StepTwo";
  import StepThree from "views/StepThree";
  import axios from "axios";
  import "views/Typography.css";
  
  class Help extends Component {
    constructor(props) {
      super(props)
      this._next = this._next.bind(this)
      this._prev = this._prev.bind(this)
      // Set the initial input values
      this.state = {
        currentStep: 1, // Default is Step 1
        productName: "",
        productPrice: "",
        productCategory: "",
        productBrand: "",
        countryOfOrigin: "",
        riskType: "",
        alertSubmittedBy: "",
        yourCity: "",
        yourAddress: "",
        productImage: undefined,
        description: "",
        showMessage: false,
  
        pname: "",
        price: 0,
        pCategory: "",
        pBrand: "",
        pCountryOfOrigin: "",
      }
      // Bind the submission to handleChange()
      this.handleChange = this.handleChange.bind(this);
      this.handleChange1 = this.handleChange1.bind(this);
      this.handleChange2 = this.handleChange2.bind(this);
      this.handleChange3 = this.handleChange3.bind(this);
      this.onChangeHandlerPost = this.onChangeHandlerPost.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    //---------------------on change of file-------------------
    handleChange(event) {
      this.setState({ countryOfOrigin: event.target.value });
      console.log(this.state.countryOfOrigin);
    }
    handleChange1(event) {
      this.setState({ riskType: event.target.value });
      console.log(this.state.riskType);
    }
    handleChange2(event) {
      this.setState({ alertSubmittedBy: event.target.value });
      console.log(this.state.alertSubmittedBy);
    }
    handleChange3(event) {
      this.setState({ productCategory: event.target.value });
      console.log(this.state.productCategory);
    }
    //-------------------------------------------------------
    onChangeHandlerPost = (event) =&gt; {
      this.setState({
        productImage: event.target.files[0],
      });
      console.log(event.target.files[0]);
    };
  
    onClickHandler = (event) =&gt; {
      console.log("Clicked");
  
      this.setState({
        showMessage: true,
      });
    };
    //----------------------------handle Submit----------------
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      const form = new FormData();
      form.append("productName", this.productName.value);
      form.append("productPrice", this.productPrice.value);
      form.append("productCategory", this.productCategory.value);
      form.append("productBrand", this.productBrand.value);
      form.append("countryOfOrigin", this.state.countryOfOrigin);
      form.append("riskType", this.state.riskType);
      form.append("alertSubmittedBy", this.state.alertSubmittedBy);
      form.append("yourCity", this.yourCity.value);
      form.append("yourAddress", this.yourAddress.value);
      form.append("productImage", this.state.productImage);
      form.append("description", this.textArea.value);
      axios.post("https://alert-amigo-api.herokuapp.com/products", form, {
        headers: { "Content-Type": "multipart/form-data" },
      });
  
      this.setState({ showMessage: true });
  
      console.log("Clicked");
      //---------------------------------------------------
      /* const pname = this.productName.value;
      const price = this.productPrice.value;
      const pCategory = this.productCategory.value;
      const pBrand = this.productBrand.value;
      const pCountryOfOrigin = this.state.countryOfOrigin;
  
      this.props.createProduct(pname, price, pCategory, pBrand, pCountryOfOrigin); */
    };
  
    _next() {
      let currentStep = this.state.currentStep
      // If the current step is 1 or 2, then add one on "next" button click
      currentStep = currentStep &gt;= 2? 3: currentStep + 1
      this.setState({
        currentStep: currentStep
      })
    }
  
    _prev() {
      let currentStep = this.state.currentStep
      // If the current step is 2 or 3, then subtract one on "previous" button click
      currentStep = currentStep &lt;= 1? 1: currentStep - 1
      this.setState({
        currentStep: currentStep
      })
    }
  
    // Use the submitted data to set the state
    // handleChange(event) {
    //   const {name, value} = event.target
    //   this.setState({
    //     [name]: value
    //   })
    // }
  
    get previousButton(){
    let currentStep = this.state.currentStep;
    // If the current step is not 1, then render the "previous" button
    if(currentStep !==1){
      return (
        &lt;button
          className="btn btn-secondary"
          type="button" onClick={this._prev}&gt;
        Previous
        &lt;/button&gt;
      )
    }
    // ...else return nothing
    return null;
  }
  
  get nextButton(){
    let currentStep = this.state.currentStep;
    // If the current step is not 3, then render the "next" button
    if(currentStep &lt;3){
      return (
        &lt;button
          className="btn btn-primary float-right"
          type="button" onClick={this._next}&gt;
        Next
        &lt;/button&gt;
      )
    }
    // ...else render nothing
    return null;
  }
    // Render UI will go here...
    render() {
  return (
    &lt;React.Fragment&gt;
    &lt;div&gt;
      &lt;div className="alert-1"&gt;
        &lt;h3 className="a"&gt;
          Report a Product &lt;i className="pe-7s-news-paper"&gt;&lt;/i&gt;
        &lt;/h3&gt;
        &lt;hr className="new1"&gt;&lt;/hr&gt;
        &lt;p className="k"&gt;
          Please check if the product you want to report has already been
          reported earlier using the &lt;b&gt;"Search"&lt;/b&gt; option.
        &lt;/p&gt;
        &lt;p className="k"&gt;
          {" "}
          If you couldn't find the product there, then you can &lt;b&gt;
            "Report"
          &lt;/b&gt;{" "}
          the product here.
        &lt;/p&gt;
        &lt;p className="k"&gt;
          {" "}
          Please ensure to fill in all the required details and ensure that
          the details entered by you are correct.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;div className="container1"&gt;
    &lt;p&gt;Step {this.state.currentStep} &lt;/p&gt;
  
    &lt;form onSubmit={this.handleSubmit}
          id="myForm"
          method="POST"
          encType="multipart/form-data"&gt;
      &lt;StepOne
        currentStep={this.state.currentStep}
        onChange={this.handleChangePost}
        onChange={this.handleChange3}
        productName={this.state.productName}
        productPrice={this.state.productPrice}
        productCategory={this.state.productCategory}
        productBrand={this.state.productBrand}
        handleChange={this.handleChange}
      /&gt;
      &lt;StepTwo
        currentStep={this.state.currentStep}
        handleChange={this.handleChange}
        onChange={this.handleChange1}
        onChange={this.handleChange2}
      /&gt;
      &lt;StepThree
        currentStep={this.state.currentStep}
        handleChange={this.handleChange}
        onChange={this.handleChangePost}
        onChange={this.onChangeHandlerPost}
      /&gt;
      {this.previousButton}
      {this.nextButton}
    &lt;/form&gt;
    &lt;br /&gt;
  
    &lt;div&gt;
      {this.state.showMessage &amp;&amp; (
        &lt;div className="alert alert-success"&gt;
          &lt;strong&gt;Success!&lt;/strong&gt; successful submitted a report
        &lt;/div&gt;
      )}
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
    &lt;/React.Fragment&gt;
  
  )
  }
  }
  export default Help</code></pre>
  </div>
  </div>
  </p>
  
  <p>These are my child components:
  I want to know how to use props to send the field data to the parent component 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  class StepOne extends React.Component {
    render() {
      if (this.props.currentStep !== 1) { // Prop: The current step
        return null
      }
      // The markup for the Step 1 UI
      return(
        &lt;div className="form-group"&gt;
          &lt;label&gt; Product Name: &lt;/label&gt;
          &lt;input
            className="form-control"
            id="productName"
            type="text"
            ref={(input) =&gt; {
              this.productName = input;
            }}
            placeholder="Product Name"
            required
            // Prop: The email input data
            onChange={this.props.handleChangePost} // Prop: Puts data into state
          /&gt;
          &lt;label&gt; Product Price: &lt;/label&gt;
          &lt;input
            id="productPrice"
            type="text"
            ref={(input) =&gt; {
              this.productPrice = input;
            }}
            onChange={this.props.handleChangePost}
  
            className="form-control"
            placeholder="Product Price in Euros (€)"
            required
          /&gt;
          &lt;label&gt;
           Product Category:
            &lt;select
              id="productCategory"
              value={this.productCategory}
              onChange={this.handleChange3}
              required
            &gt;
              &lt;option value="Toys"&gt;Toys&lt;/option&gt;
              &lt;option value="Motor vehicles"&gt;Motor vehicles&lt;/option&gt;
              &lt;option value="Clothing, textiles and fashion items"&gt;Clothing, textiles and fashion items&lt;/option&gt;
              &lt;option value="Electrical appliances and equipment"&gt;Electrical appliances and equipment&lt;/option&gt;
              &lt;option value="Childcare articles and children's equipment"&gt;Childcare articles and children equipment&lt;/option&gt;
              &lt;option value="Cosmetics"&gt;Cosmetics&lt;/option&gt;
              &lt;option value="Jewellery"&gt;Jewellery&lt;/option&gt;
              &lt;option value="Other"&gt;Other&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
          &lt;br/&gt;
          &lt;label&gt; Brand Name: &lt;/label&gt;
          &lt;input
            id="productBrand"
            type="text"
            onChange={this.handleChangePost}
            ref={(input) =&gt; {
              this.productBrand = input;
            }}
            className="form-control"
            placeholder="Product Brand"
            required
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  export default StepOne</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  class StepTwo extends React.Component {
    render() {
      if (this.props.currentStep !== 2) {
      return null
    }
    return(
      &lt;div className="form-group"&gt;
      &lt;label&gt;
        Country of origin:
        &lt;select
          id="countryoforigin"
          value={this.countryoforigin}
          onChange={this.handleChange}
          required
        &gt;
          &lt;option&gt;--select--&lt;/option&gt;
          &lt;option value="albania"&gt;Albania&lt;/option&gt;
          &lt;option value="algeria"&gt;Algeria&lt;/option&gt;
          &lt;option value="argentina"&gt;Argentina&lt;/option&gt;
          &lt;option value="austria"&gt;Austria&lt;/option&gt;
          &lt;option value="bangladesh"&gt;Bangladesh&lt;/option&gt;
          &lt;option value="barbados"&gt;Barbados&lt;/option&gt;
          &lt;option value="belarus"&gt;Belarus&lt;/option&gt;
          &lt;option value="belgium"&gt;Belgium&lt;/option&gt;
          &lt;option value="bosnia and Herzegovina"&gt;
            Bosnia and Herzegovina
          &lt;/option&gt;
          &lt;option value="Brazil"&gt;Brazil&lt;/option&gt;
          &lt;option value="Bulgaria"&gt;Bulgaria&lt;/option&gt;
          &lt;option value="Combodia"&gt;Combodia&lt;/option&gt;
          &lt;option value="Cameroon"&gt;Cameroon&lt;/option&gt;
          &lt;option value="Canada"&gt;Canada&lt;/option&gt;
          &lt;option value="Chile"&gt;Chile&lt;/option&gt;
          &lt;option value="china"&gt;China&lt;/option&gt;
          &lt;option value="Cocos (Keeling) Islands"&gt;
            Cocos (Keeling) Islands
          &lt;/option&gt;
          &lt;option value=" Colombia"&gt; Colombia&lt;/option&gt;
  
          &lt;option value="Congo"&gt;Congo&lt;/option&gt;
          &lt;option value=" Croatia"&gt; Croatia&lt;/option&gt;
          &lt;option value="Cyprus"&gt;Cyprus&lt;/option&gt;
          &lt;option value=" Czech Republic"&gt; Czech Republic&lt;/option&gt;
          &lt;option value=" Democratic People's Republic of Korea"&gt;
            {" "}
            Democratic People's Republic of Korea
          &lt;/option&gt;
          &lt;option value="Democratic Republic Of Congo"&gt;
            Democratic Republic Of Congo
          &lt;/option&gt;
          &lt;option value=" Denmark"&gt; Denmark&lt;/option&gt;
          &lt;option value="Dominican Republic"&gt;Dominican Republic&lt;/option&gt;
          &lt;option value=" Ecuador"&gt; Ecuador&lt;/option&gt;
          &lt;option value="Egypt"&gt;Egypt&lt;/option&gt;
          &lt;option value="Estonia"&gt;Estonia&lt;/option&gt;
          &lt;option value="Finland"&gt;Finland&lt;/option&gt;
          &lt;option value="Former Yugoslav Republic of Macedonia"&gt;
            Former Yugoslav Republic of Macedonia
          &lt;/option&gt;
          &lt;option value="France"&gt;France&lt;/option&gt;
          &lt;option value="Germany"&gt;Germany&lt;/option&gt;
          &lt;option value="Greece"&gt;Greece&lt;/option&gt;
          &lt;option value="Guatemala"&gt;Guatemala&lt;/option&gt;
          &lt;option value=" Guinea-Bissau"&gt; Guinea-Bissau&lt;/option&gt;
          &lt;option value="Hong Kong"&gt;Hong Kong&lt;/option&gt;
          &lt;option value="Hungary"&gt;Hungary&lt;/option&gt;
          &lt;option value="Iceland"&gt;Iceland&lt;/option&gt;
          &lt;option value="India"&gt;India&lt;/option&gt;
          &lt;option value="Indonesia"&gt;Indonesia&lt;/option&gt;
          &lt;option value=" Iran"&gt; Iran&lt;/option&gt;
          &lt;option value=" Ireland"&gt; Ireland&lt;/option&gt;
          &lt;option value="Israel"&gt;Israel&lt;/option&gt;
          &lt;option value="Italy"&gt;Italy&lt;/option&gt;
          &lt;option value="Ivory Coast"&gt;Ivory Coast&lt;/option&gt;
          &lt;option value="Jamaica"&gt;Jamaica&lt;/option&gt;
          &lt;option value="Japan"&gt;Japan&lt;/option&gt;
          &lt;option value="Jordan"&gt;Jordan&lt;/option&gt;
          &lt;option value=" Lao People's Democratic Republic"&gt;
            {" "}
            Lao People's Democratic Republic
          &lt;/option&gt;
          &lt;option value=" Latvia"&gt; Latvia&lt;/option&gt;
          &lt;option value="Lebanon"&gt;Lebanon&lt;/option&gt;
          &lt;option value="Lithuania"&gt;Lithuania&lt;/option&gt;
          &lt;option value="Luxembourg"&gt;Luxembourg&lt;/option&gt;
          &lt;option value="Madagascar"&gt;Madagascar&lt;/option&gt;
          &lt;option value="Malaysia"&gt;Malaysia&lt;/option&gt;
          &lt;option value=" Mali"&gt; Mali&lt;/option&gt;
          &lt;option value="Malta"&gt;Malta&lt;/option&gt;
          &lt;option value="Mexico"&gt;Mexico&lt;/option&gt;
          &lt;option value="Monaco"&gt;Monaco&lt;/option&gt;
          &lt;option value="Morocco"&gt;Morocco&lt;/option&gt;
          &lt;option value=" Mozambique"&gt; Mozambique&lt;/option&gt;
          &lt;option value=" Namibia"&gt; Namibia&lt;/option&gt;
          &lt;option value="Nepal"&gt;Nepal&lt;/option&gt;
          &lt;option value="New Zealand"&gt;New Zealand&lt;/option&gt;
          &lt;option value=" Nicaragua"&gt; Nicaragua&lt;/option&gt;
          &lt;option value="Nigeria"&gt;Nigeria&lt;/option&gt;
          &lt;option value="Norway"&gt;Norway&lt;/option&gt;
          &lt;option value="Pakistan"&gt;Pakistan&lt;/option&gt;
          &lt;option value="Paraguay"&gt;Paraguay&lt;/option&gt;
          &lt;option value="People's Republic of China"&gt;
            People's Republic of China
          &lt;/option&gt;
          &lt;option value="Peru"&gt;Peru&lt;/option&gt;
          &lt;option value="Philippines"&gt;Philippines&lt;/option&gt;
          &lt;option value="Poland"&gt;Poland&lt;/option&gt;
          &lt;option value="Portugal"&gt;Portugal&lt;/option&gt;
          &lt;option value="Republic of Korea"&gt;Republic of Korea&lt;/option&gt;
          &lt;option value="Republic of Moldova"&gt;
            Republic of Moldova
          &lt;/option&gt;
          &lt;option value="Romania"&gt;Romania&lt;/option&gt;
          &lt;option value="Russia"&gt;Russia&lt;/option&gt;
          &lt;option value="Russian Federation"&gt;Russian Federation&lt;/option&gt;
          &lt;option value="Saudi Arabia"&gt;Saudi Arabia&lt;/option&gt;
          &lt;option value="Senegal"&gt;Senegal&lt;/option&gt;
          &lt;option value="Serbia"&gt;Serbia&lt;/option&gt;
          &lt;option value="Singapore"&gt;Singapore&lt;/option&gt;
          &lt;option value="Slovakia"&gt;Slovakia&lt;/option&gt;
          &lt;option value="Slovenia"&gt;Slovenia&lt;/option&gt;
          &lt;option value="South Africa"&gt;South Africa&lt;/option&gt;
          &lt;option value="South Korea"&gt;South Korea&lt;/option&gt;
          &lt;option value="Spain"&gt;Spain&lt;/option&gt;
          &lt;option value="Sri Lanka"&gt;Sri Lanka&lt;/option&gt;
          &lt;option value="Sweden"&gt;Sweden&lt;/option&gt;
          &lt;option value="Switzerland"&gt;Switzerland&lt;/option&gt;
          &lt;option value="Syria"&gt;Syria&lt;/option&gt;
          &lt;option value="Taiwan"&gt;Taiwan&lt;/option&gt;
          &lt;option value="Thailand"&gt;Thailand&lt;/option&gt;
          &lt;option value="The Bahamas"&gt;The Bahamas&lt;/option&gt;
          &lt;option value="The Netherlands"&gt;The Netherlands&lt;/option&gt;
  
          &lt;option value="Togo"&gt;Togo&lt;/option&gt;
          &lt;option value="Tunisia"&gt;Tunisia&lt;/option&gt;
          &lt;option value="Turkey"&gt;Turkey&lt;/option&gt;
  
          &lt;option value="Ukraine"&gt;Ukraine&lt;/option&gt;
          &lt;option value="United Arab Emirates"&gt;
            United Arab Emirates
          &lt;/option&gt;
          &lt;option value="United Kingdom"&gt;United Kingdom&lt;/option&gt;
          &lt;option value="United States"&gt;United States&lt;/option&gt;
          &lt;option value="Uruguay"&gt;Uruguay&lt;/option&gt;
          &lt;option value="Vietnam"&gt;Vietnam&lt;/option&gt;
        &lt;/select&gt;
      &lt;/label&gt;
      &lt;label&gt;
        Risk Type or Level:
        &lt;select
          id="risktype"
          value={this.risktype}
          onChange={this.handleChange1}
          required
        &gt;
          &lt;option&gt;--select--&lt;/option&gt;
          &lt;option value="very low"&gt;very low&lt;/option&gt;
          &lt;option value="low"&gt;low&lt;/option&gt;
          &lt;option value="medium"&gt;medium&lt;/option&gt;
          &lt;option value="High"&gt;High&lt;/option&gt;
        &lt;/select&gt;
      &lt;/label&gt;
      &lt;label&gt;
        Alert Submitted by:
        &lt;select
          id="alertsubmittedby"
          value={this.alertsubmittedby}
          onChange={this.handleChange2}
          required
        &gt;
          &lt;option&gt;--select--&lt;/option&gt;
          &lt;option value="consumer"&gt;Consumer&lt;/option&gt;
          &lt;option value="producer"&gt;Producer&lt;/option&gt;
          &lt;option value="supplier"&gt;Supplier&lt;/option&gt;
          &lt;option value="eu Authorities"&gt;Eu Authorities&lt;/option&gt;
        &lt;/select&gt;
      &lt;/label&gt;
      &lt;/div&gt;
    );
    }
  }
  export default StepTwo</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  class StepThree extends React.Component {
    render() {
      if (this.props.currentStep !== 3) {
      return null
    }
    return(
      &lt;React.Fragment&gt;
      &lt;div className="form-group"&gt;
        &lt;label&gt;Notifiers data&lt;/label&gt;
        &lt;input
          id="yourCity"
          type="text"
          onChange={this.handleChangePost}
          ref={(input) =&gt; {
            this.yourCity = input;
          }}
          className="form-control"
          placeholder="Your city"
          required
        /&gt;
        &lt;label&gt;Address&lt;/label&gt;
        &lt;input
          id="yourAddress"
          type="text"
          onChange={this.handleChangePost}
          ref={(input) =&gt; {
            this.yourAddress = input;
          }}
          className="form-control"
          placeholder="Your Address"
          required
        /&gt;
        &lt;label&gt; Upload Images: &lt;/label&gt;
        &lt;input
          name="uploadFile"
          type="file"
          onChange={this.onChangeHandlerPost}
          ref={(input) =&gt; {
            this.uploadFile = input;
          }}
          className="form-control"
          placeholder="upload Images"
          required
        /&gt;
        &lt;label&gt; Description &lt;/label&gt;
        &lt;textarea
          name="textArea"
          onChange={this.handleChangePost}
          ref={(input) =&gt; {
            this.textArea = input;
          }}
          className="form-control"
          placeholder="Write here.."
          required
          col="5"
          row="15"
        /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;button type="submit" className="mt-auto btn btn-primary" id="new2"&gt;Submit&lt;/button&gt;
      &lt;/React.Fragment&gt;
    );
    }
  }
  export default StepThree</code></pre>
  </div>
  </div>
  </p>