title: Properties of state not setting ["This field is required."]
body: <p>I have a django/react (s3 bucket for image upload)project which adds recipes to a postgres database. In my RecipeFormContainer Component one of my properties to the recipe is an Array of ingredients. The array is supposed to be filled with objects that are made up of the key value pairs of units, quantity etc. I have written a method called addIngredients, but it does not seem to be adding the objects into my ingredients array. I get the error "ingredients: ["This field is required."]" when trying to submit my recipe and do a post. Please enlighten me with what I am missing. 
  Code is as follows: </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 {Form} from 'react-bootstrap'
  import Button from 'react-bootstrap/Button';
  
  
  class RecipeFormContainer extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              title: '',
              creator: '',
              mealTime: "",
              prepTime: "",
              cookTime: "",
              image_preview: "",
              servings: "",
              directions: '',
              ingredients: [{
                  units: '',
                  amounts: '',
                  multiples: '',
                  quantity: '',
                  name: ''
              }],
              image: "",
  
          };
  
          this.handleImage = this.handleImage.bind(this);
          this.handleIngredientInput = this.handleIngredientInput.bind(this);
          this.handleAddIngredients = this.handleAddIngredients.bind(this);
      }
  
      handleAddIngredients =(e) =&gt; {
          e.preventDefault();
  
  // the ingredients properties are not being added to the ingredients array property on state *************************
  
          let ingredient = {units: '',
                  amounts: '',
                  multiples: '',
                  quantity: '',
                  name: ''};
  
          //save the current state of ingredients array in variable ingredient
          let {ingredients} = this.state.ingredients;
          // add the ingredient object into the ingredients array ( which is a property of state)
          ingredients.push(ingredient);
  
          // set the new array of ingredients as the state of the property ingredients
          this.setState( {ingredients: ingredients});
      };
  
  
  
      handleInput = (e) =&gt; {
          e.preventDefault();
          this.setState({[e.target.name]: e.target.value});
  
      };
  
  
      handleIngredientInput = (e) =&gt; {
          e.preventDefault();
          this.setState({[e.target.name]: e.target.value})
      };
  
      handleImage(event) {
          event.preventDefault();
          // this makes it show up in preview
  
          let file = event.target.files[0];
          let fileReader = new FileReader();
          fileReader.onloadend = () =&gt; this.setState({image_preview:fileReader.result});
          fileReader.readAsDataURL(file);
          this.setState({image:file});
      }
  
  
  
      submitRecipe = (event) =&gt; {
          event.preventDefault();
          let recipe = {...this.state};
          console.log('recipe one', this.state);
  
          let formData = new FormData();
  
          formData.append("image", this.state.image);
          formData.append('title', this.state.title);
          formData.append("ingredients", this.state.ingredients);
          formData.append("mealTime", this.state.mealTime);
          formData.append("prepTime", this.state.prepTime);
          formData.append("cookTime", this.state.cookTime);
          formData.append("image_Preview", this.state.image_preview);
          formData.append("servings", this.state.servings);
          formData.append("directions", this.state.directions);
          formData.append("creator", this.state.creator);
          // formData.append("units", this.state.ingredients.units);
          // formData.append("amount", this.state.ingredients.amount);
          // formData.append("multiples", this.state.ingredients.multiples);
          // formData.append("quantity", this.state.ingredients.quantity);
          // formData.append("name", this.state.ingredients.name);
  
          // add line for each property of state
  
  
          const conf = {
              method: "POST",
              body: formData,
  
          };
  
          fetch('/api/recipe/', conf).then((response) =&gt; {
  
              return response.json();
  
          }).then((json) =&gt; {
              this.props.addRecipe(json);
  
          });
  
  
      };
  
  
      render() {
  
  
          return (
  
  
              &lt;Form onSubmit={this.submitRecipe} encType="multipart/form-data"  &gt;
  
                  &lt;Form.Group onSubmit={event =&gt; {event.preventDefault(); }}  &gt;
                      &lt;img src={this.state.image_preview}/&gt;
                      &lt;input className="input" type="file"  onChange={this.handleImage} name="image" /&gt;
                  &lt;/Form.Group&gt;
  
                  &lt;Form.Group controlId="exampleForm.ControlInput1"&gt;
                      &lt;Form.Label&gt;Recipe Name&lt;/Form.Label&gt;
                      &lt;Form.Control type="text" placeholder="Enter Recipe Name Here"
                                    name="title"
                                    value={this.state.title}
                                    onChange={this.handleInput}/&gt;
  
  
                      &lt;Form.Label&gt;Recipe Creator&lt;/Form.Label&gt;
                      &lt;Form.Control type="text" placeholder="Enter Your Name Here"
                                    value={this.state.creator}
                                    name="creator"
                                    onChange={this.handleInput}/&gt;
  
                  &lt;/Form.Group&gt;
  
                  &lt;Form.Group controlId="exampleForm.ControlSelect1" id="foodType"&gt;
                      &lt;Form.Label&gt;Example select&lt;/Form.Label&gt;
                      &lt;Form.Control as="select"&gt;
                          &lt;option&gt;Breakfast&lt;/option&gt;
                          &lt;option&gt;Lunch&lt;/option&gt;
                          &lt;option&gt;Dinner&lt;/option&gt;
                          &lt;option&gt;Dessert&lt;/option&gt;
                          &lt;option&gt;Vegetarian&lt;/option&gt;
                      &lt;/Form.Control&gt;
                  &lt;/Form.Group&gt;
  
  
                  &lt;Form.Control type="text" placeholder="Prep Time" className="midButt"
                                value={this.state.prepTime}
                                name="prepTime"
                                onChange={this.handleInput}/&gt;
                  &lt;Form.Control type="text" placeholder="Cook Time" className="midButt"
                                value={this.state.cookTime}
                                name="cookTime"
                                onChange={this.handleInput}/&gt;
  
  
                  &lt;Form.Group controlId="exampleForm.ControlSelect1" id="foodTemp"&gt;
                      &lt;Form.Control as="select"&gt;
                          &lt;option&gt;Fahrenheit&lt;/option&gt;
                          &lt;option&gt;Celsius&lt;/option&gt;
                      &lt;/Form.Control&gt;
                  &lt;/Form.Group&gt;
  
  
                  &lt;Form.Group&gt;
                      This Recipe Will Make: &lt;Form.Control type="number" placeholder="servings" id="servings" value={this.state.ingredients.servings} onChange={this.handleInput} name="servings" /&gt;
  
                      &lt;Form.Control type="text" placeholder="cookies, loaves, etc." id="loaf" value={this.state.ingredients.multiples} onChange={this.handleIngredientInput} name="multiples"/&gt;
  
                  &lt;/Form.Group&gt;
  
                  {this.state.ingredients.map((ingredient, index) =&gt; {
                      return (
                          &lt;div key={index}&gt;
                              &lt;Form.Control type="number" placeholder="#" id="numberAmount" value={this.state.ingredients.quantity} onChange={this.handleIngredientInput} name="amount"/&gt;
                              &lt;Form.Control type="text" placeholder="units" id="units" value={this.state.ingredients.units} onChange={this.handleIngredientInput} name="units"/&gt;
                              &lt;Form.Control type="text" placeholder="Ingredient Name" id="name" value={this.state.ingredients.name} onChange={this.handleIngredientInput} name="name"/&gt;
                          &lt;/div&gt;
                      );
                  })};
  
                  &lt;Button variant="light" onClick = {this.handleAddIngredients}&gt; + &lt;/Button&gt;
                  {/*/!*will update state with event handler this.state.ingredients, append object to array *!/*/}
  
  
                  &lt;Form.Group controlId="exampleForm.ControlTextarea1"&gt;
                      &lt;Form.Label&gt;Directions&lt;/Form.Label&gt;
                      &lt;Form.Control as="textarea" rows="3"
                          value={this.state.directions}
                                name="directions"
                                onChange={this.handleInput}/&gt;
                  &lt;/Form.Group&gt;
  
  
                  &lt;Button type="submit" variant="secondary"&gt;Save This Recipe !&lt;/Button&gt;
  
              &lt;/Form&gt;
          )
      };
  }
  
  
  export default RecipeFormContainer;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   </code></pre>
  </div>
  </div>
  </p>