Dynamic variables in react js

Question

i have a dynamic form in react js which gives me a output like the following -

screes are here of console logs - http://imgur.com/a/w9KYN

Object keys : Array[2] 0 : 1 1 : 2 length : 2 proto : 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

Console.log(JSON.Stringfy(values)) -

{"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}

if i delete one or two form items from the middle - here is the output -

{"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}

I can read the keys array in such manner -

console.log('Recived values:', values.keys);

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?

The code snippet is here :

hadleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        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);
        }
    })
}

my render component looks something like this -

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) => {
        return(
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Item' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`names-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    whitespace: true,
                                    message: 'Please input item name',
                                }],
                            })(
                                <Input placeholder="Item Name" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Value/Unit' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`values-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Please input item value',
                                }],
                            })(
                                <InputNumber placeholder="Item value per unit" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span = {6}>
                        <FormItem
                            label={index === 0 ? 'Total Unit' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`noItems-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Please input total number of items',
                                }],
                            })(
                                <InputNumber placeholder="Please input total number of items" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Total Value' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`tVal-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Total Value',
                                }],
                            })(
                                <InputNumber placeholder="Total Value" style={{width: '75%'}}/>
                            )}
                            <Icon
                                className="dynamic-delete-button"
                                type="minus-circle-o"
                                disabled={keys.length === 1}
                                onClick={() => this.remove(k)}
                            />
                        </FormItem>
                    </Col>
                </Row>
            </div>

Answer 1

what you want to do is define the variables to be used

const myVars = ['names', 'noItems', 'tVal', 'values']
let totalVal = 0;
lis.forEach( (value) => {
    myVars.forEach( myVar => {
        const key = `${myVar}-${value}`
        console.log(`${key}: ${values[key]}`)
        if (myVar === 'tVal') { 
            totalVal += values[key]
        }
    })
})
console.log(totalVal);

FIDDLE

so basically what i'm doing here is using the myVars array to define which keys i'm interested in. From there I am looping over the keys array to know which variable to create aka name-number. then values (the original object) bracket or sub notation on that key to get the actual value.