title: Dynamic variables in react js
body: <p>i have a dynamic form in react js which gives me a output like the following -</p>
  
  <pre><code>screes are here of console logs - http://imgur.com/a/w9KYN
  </code></pre>
  
  <blockquote>
    <p>Object
    keys
    :
    Array[2]
    0
    :
    1
    1
    :
    2
    length
    :
    2
    <strong>proto</strong>
    :
    Array[0]
    names-1
    :
    "bill"
    names-2
    :
    "wil"
    noItems-1
    :
    50
    noItems-2
    :
    50050
    tVal-1
    :
    500
    tVal-2
    :
    2520
    values-1
    :
    500
    values-2
    :
    500</p>
  </blockquote>
  
  <p>Console.log(JSON.Stringfy(values)) -</p>
  
  <pre><code>{"keys":[1,2],"names-1":"will","values-1":200,"noItems-1":2002,"tVal-1":200,"names-2":"bill","values-2":200,"noItems-2":2002,"tVal-2":200}
  </code></pre>
  
  <p>if i delete one or two form items from the middle - here is the output -</p>
  
  <pre><code>{"keys":[1,4],"names-1":"will","values-1":200,"noItems-1":2002,"tVal-1":200,"names-4":"dill","values-4":300,"noItems-4":300,"tVal-4":300}
  </code></pre>
  
  <p>I can read the keys array in such manner - </p>
  
  <pre><code>console.log('Recived values:', values.keys);
  </code></pre>
  
  <p>But i want to iterate the values, Can someone help me in iterating the values? to be specific how go i get 'names-1' and 'names-2'? as the string is based on the keys array?</p>
  
  <p>The code snippet is here : </p>
  
  <pre><code>hadleSubmit = (e) =&gt; {
      e.preventDefault();
      this.props.form.validateFields((err, values) =&gt; {
          if(!err){
              var lis = values.keys;
              this.setState({
                  controlKey: lis
              });
              lis.forEach(function(value){
                  /* need help to iterate here*/
              })
              console.log('Recived values:', values.keys);
          }
      })
  }
  </code></pre>
  
  <p>my render component looks something like this -</p>
  
  <pre><code>const {getFieldDecorator, getFieldValue}  = this.props.form;
      const formItemLayoutWithOutLabel = {
          wrapperCol: {
              xs: { span: 24, offset: 0 },
              sm: { span: 20, offset: 4 },
              },
      };
      getFieldDecorator('keys', {initialValue:[]});
      const keys = getFieldValue('keys');
      const formItems = keys.map((k, index) =&gt; {
          return(
              &lt;div&gt;
                  &lt;Row&gt;
                      &lt;Col span={6}&gt;
                          &lt;FormItem
                              label={index === 0 ? 'Item' : ''}
                              required={false}
                              key={k}
                          &gt;
                              {getFieldDecorator(`names-${k}`, {
                                  validateTrigger: ['onChange'],
                                  rules: [{
                                      required: true,
                                      whitespace: true,
                                      message: 'Please input item name',
                                  }],
                              })(
                                  &lt;Input placeholder="Item Name" style={{width: '75%'}}/&gt;
                              )}
                          &lt;/FormItem&gt;
                      &lt;/Col&gt;
                      &lt;Col span={6}&gt;
                          &lt;FormItem
                              label={index === 0 ? 'Value/Unit' : ''}
                              required={false}
                              key={k}
                          &gt;
                              {getFieldDecorator(`values-${k}`, {
                                  validateTrigger: ['onChange'],
                                  rules: [{
                                      required: true,
                                      message: 'Please input item value',
                                  }],
                              })(
                                  &lt;InputNumber placeholder="Item value per unit" style={{width: '75%'}}/&gt;
                              )}
                          &lt;/FormItem&gt;
                      &lt;/Col&gt;
                      &lt;Col span = {6}&gt;
                          &lt;FormItem
                              label={index === 0 ? 'Total Unit' : ''}
                              required={false}
                              key={k}
                          &gt;
                              {getFieldDecorator(`noItems-${k}`, {
                                  validateTrigger: ['onChange'],
                                  rules: [{
                                      required: true,
                                      message: 'Please input total number of items',
                                  }],
                              })(
                                  &lt;InputNumber placeholder="Please input total number of items" style={{width: '75%'}}/&gt;
                              )}
                          &lt;/FormItem&gt;
                      &lt;/Col&gt;
                      &lt;Col span={6}&gt;
                          &lt;FormItem
                              label={index === 0 ? 'Total Value' : ''}
                              required={false}
                              key={k}
                          &gt;
                              {getFieldDecorator(`tVal-${k}`, {
                                  validateTrigger: ['onChange'],
                                  rules: [{
                                      required: true,
                                      message: 'Total Value',
                                  }],
                              })(
                                  &lt;InputNumber placeholder="Total Value" style={{width: '75%'}}/&gt;
                              )}
                              &lt;Icon
                                  className="dynamic-delete-button"
                                  type="minus-circle-o"
                                  disabled={keys.length === 1}
                                  onClick={() =&gt; this.remove(k)}
                              /&gt;
                          &lt;/FormItem&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/div&gt;
  </code></pre>