I would like to create a number of fields numbering zero to 15, with a key and value like so:

`export default class extends React.PureComponent {

render() {

    const {
        id,
        type,
        processor,
        processor_json,
        title,
        validation_json,
        submitting,
        logo,
        onUpload,
        value,
    } = this.props

    function getAssociatedRow (rowNumber)
    {
        return (
            <div style={{ display: 'flex' }}>

                <div style={{ flex: 1 }}>
                    <Field
                        required
                        component={InputField}
                        name={"value[" + {rowNumber} + "][key]"}
                        label={"Key " + rowNumber}
                        disabled={submitting}
                        labelCol={{span: labelColSpan}}
                        wrapperCol={{span: wrapperColSpan}}
                    />
                </div>
                <div style={{ flex: 1 }}>

                    <Field
                        required
                        component={InputField}
                        name={"value[" + {rowNumber} + "][value]"}
                        label={"Value "+rowNumber}
                        disabled={submitting}
                        labelCol={{span: labelColSpan}}
                        wrapperCol={{span: wrapperColSpan}}
                    />

                </div>

            </div>
        )
    }

    function getAssociatedRows ()
    {
        let output = "";
        for (let i = 0; i < 15; i ++)
        {
            output += getAssociatedRow(i);
        }
        return output;
    }

    return (

        <div>

            {processor === 'AssociativeJSON' && (

                <div> {getAssociatedRows()} </div>

            )}

        </div>

    )

}

}
`

This just returns [object][object][object] 😉 I have tried adding the fragment in to an array an looping through the array etc

For clarity I have removed all the other code! I can achieve what I want by putting:

getAssociatedRow(1)
getAssociatedRow(2)
getAssociatedRow(3)

etc within the return, but I would like to understand what the best way to achieve this is within react? this would normally be a 2 minute job in other languages I work with

NB – I am a noob to react.