For loop in JSX / Gutenberg

Hello,

I use the create-block tool from ahamadawais (link: https://github.com/ahmadawais/create-guten-block) I wanted to create my first block.

I want a RangeControl in the InspecorControl and when I change the value I want to display as many elements as the range is, but I don’t know how to realize this.

I post my try:

edit: function( props ) {

    const {
        setAttributes,
        attributes,
        className,
        focus
    } = props;

    function createMyElements() {
        let elements

        for (var i = 0; i < attributes.test; i++) {
            alert(x);
            params.push(<span>Test</span>)
        }
    }

    // Creates a <p class='wp-block-cgb-block-reiseparameter'></p>.
    return ([
        <InspectorControls>
            <RangeControl label="Test" value={ attributes.test } min={ 0 } max={ 3 } onChange={ (value) => setAttributes( { test: value } ) } />    
        </InspectorControls>,
        <div>
            <span>Abenteuerfaktor</span>
            <span>couragiert</span>
            { createParameters }
        </div>
    ]);
}