title: Push array length remains constant
body: <p>I am new in react and I want to push values when click Ok of Modal. For example, if i want to add egg drop, and then add Chicken burrito, both of these are added in array in Navbar state  Total_Item.</p>
  <p>The problem is that the items are added, but the length of array remain 2. It seems that array size remain constant , and one array is saved in another array. I need to fix the length size, so later i can run logic to keep unique values. Please see Menu component and check Listval() function.</p>
  <p>I need to correct the push array logic.Please see the sandbox:
  <a href="https://codesandbox.io/s/mutable-water-8779d" rel="nofollow noreferrer">https://codesandbox.io/s/mutable-water-8779d</a></p>
  <p>thanks</p>
  <p>App Component</p>
  <pre><code>
  import React, {Component} from &quot;react&quot;;
  import Navbar from &quot;./components/Navbar&quot;;
  import &quot;./styles.css&quot;;
  
  class App extends Component {
  render (){
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;Navbar/&gt;
      &lt;/div&gt;
    );
  
  
  }
     
  }
  
  export default App;
  </code></pre>
  <p>Navbar Component</p>
  <pre><code>import React, {Component} from &quot;react&quot;;
  import Menu from &quot;./Menu&quot;;
  
  class Navbar extends Component {
    state={
  Category:[
    {
      id:1,
      FoodType: &quot;Chinese&quot;,
      Menu:[&quot;Egg Drop&quot;, &quot;Chicken Fried&quot;, &quot;Beef Fried&quot;],
      Price:[2,8,10]
      },
      
      {
        id:2,
        FoodType: &quot;Mexican&quot;,
        Menu:[&quot;Veg Burrito&quot;, &quot;Chicken Burrito&quot;, &quot;Beef Burrito&quot;],
        Price:[7,8,10]
        }
  
  ],
  
  One_Item:[
  {
    listvalue:null,
    Select_Item:null,
    Select_Price:null,
    Select_Quantity:null,
    Select_Item_TotalPrice:null
  
  }
  
  ],
  
  Cart_Item:[
  
    {
  Total_Item:[]
  
    }
  ]
  
  
  
    };
  
  
  
  
    render() {
      return (
  
     &lt;Menu
    //  len={this.state.length}
    //  FoodTypes_list = {this.state.map(e =&gt; e.FoodType)}
    //  MenuList_list={this.state.map(e =&gt; e.Menu)}
  
  
  Objs_Type={this.state.Category}
  
  
  
  
    //  FoodTypes={this.state.Type1.FoodType}
    //  MenuList={this.state.Type1.Menu}
   
     /&gt;
  
      );
  
  
    }
  }
  export default Navbar;
  </code></pre>
  <p>Menu Component</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Modal } from &quot;react-bootstrap&quot;;
  import NumericInput from &quot;react-numeric-input&quot;;
  
  class Menu extends Component {
    state = {
      addModalShow: false,
      copied: false
    };
  
    ModalShow = () =&gt; {
      this.setState({ addModalShow: true });
    };
  
    async ModalText(e) {
      await this.setState({ listvalue: e.target.innerHTML });
  
      //  console.log(this.state.listvalue);
    }
  
    ModalClose = () =&gt; {
      this.setState({ addModalShow: false });
    };
  
    async Listval() {
      let ll = &quot;$&quot; + this.state.listvalue.replace(/[^0-9]/g, &quot;&quot;);
  
      let ll2 = this.state.listvalue.replace(/\d+/g, &quot;&quot;);
      let ll3 = ll2.replace(/\$/g, &quot;&quot;);
  
      let ll4 = ll.replace(/\$/g, &quot;&quot;);
      let ll5 = this.state.Select_Quantity;
      let ll6 = parseFloat(ll4) * ll5;
  
      let ll7 = [this.state.Total_Item];
      ll7.push(ll3);
  
      // this.state.ll7.map((e,idx) =&gt; {
      //   key={idx}
      // };
  
      // for(var i=0;i&lt;ll7.length;i++){
      //   // push the component to elements!
      //  return ll7[key=i]
      // };
  
      // ll7.filter((item,index)=&gt;{
      //   return ll7.indexOf(item)===index
      // });
  
      // let ll2='$'+ll.replace(/[^0-9]/g,'');
      await this.setState({ Select_Price: ll });
      await this.setState({ Select_Item: ll3 });
      await this.setState({ Select_Item_TotalPrice: ll6 });
  
      await this.setState({ Total_Item: ll7 });
  
      console.log(this.state.Total_Item);
    }
  
    stylesList = {
      display: &quot;inline-block&quot;,
      background: &quot;#C8C8C8&quot;,
      width: &quot;500px&quot;,
      height: &quot;50px&quot;
    };
  
    onhover = e =&gt; {
      e.target.style.background = &quot;red&quot;;
    };
  
    offhover = e =&gt; {
      e.target.style.background = &quot;#C8C8C8 &quot;;
    };
  
    render() {
      return &lt;div className=&quot;container-fluid&quot;&gt;{this.Mapping_Type()}&lt;/div&gt;;
    }
  
    Mapping_Type() {
      let result_type = this.props.Objs_Type.map(a =&gt; a.FoodType);
      let result_menu = this.props.Objs_Type.map(a =&gt; a.Menu);
      let result_price = this.props.Objs_Type.map(a =&gt; a.Price);
  
      let newFoodtype = [];
      let newMenu = [];
      let FoodType_Menu = [];
      let Price_new = [];
      for (let i = 0; i &lt; result_type.length; i++) {
        let temp1 = &lt;h1&gt; Menu {result_type[i]}&lt;/h1&gt;;
        let temp2 = result_menu[i].map((item, idx) =&gt; (
          &lt;div style={this.stylesList}&gt;
            &lt;ul style={{ padding: 0 }}&gt;
              {/* &lt;CopyToClipboard&gt; */}
              &lt;li
                id={idx}
                style={{ listStyleType: &quot;none&quot; }}
                key={item.id}
                className={&quot;listitems&quot;}
                onMouseOver={this.onhover}
                onMouseOut={this.offhover}
                onClick={e =&gt; {
                  this.ModalShow();
                  this.ModalText(e);
                }}
              &gt;
                {&quot; &quot;}
                {item} {result_price[i][idx]}{&quot; &quot;}
              &lt;/li&gt;
              {/* &lt;/CopyToClipboard&gt; */}
  
              &lt;Modal
                style={{ opacity: 1 }}
                size=&quot;md&quot;
                aria-labelledby=&quot;contained-modal-title-vcenter&quot;
                show={this.state.addModalShow}
                onHide={this.ModalClose}
              &gt;
                &lt;Modal.Header closeButton&gt;
                  &lt;Modal.Title id=&quot;contained-modal-title-vcenter&quot;&gt;
                    Large Modal
                  &lt;/Modal.Title&gt;
                &lt;/Modal.Header&gt;
                &lt;Modal.Body&gt;
                  &lt;div className=&quot;container&quot;&gt;
                    {this.state.listvalue}
                    &lt;br /&gt;
                    &lt;NumericInput
                      min={1}
                      max={1000}
                      value={this.state.Select_Quantity}
                      onChange={value =&gt;
                        this.setState({ Select_Quantity: value })
                      }
                      style={{ float: &quot;right&quot;, width: &quot;500px&quot;, padding: &quot;10px&quot; }}
                    /&gt;
  
                    &lt;br /&gt;
  
                    &lt;button
                      class=&quot;btn btn-primary btn-sm pull-right&quot;
                      onClick={() =&gt; {
                        this.Listval();
                      }}
                    &gt;
                      OK
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/Modal.Body&gt;
              &lt;/Modal&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        ));
  
        FoodType_Menu.push(temp1, temp2);
      }
      return FoodType_Menu;
    }
  }
  
  export default Menu;
  
  
  </code></pre>