Для цикла сгенерируйте строки и добавьте счетчик в jsx

Вместо цикла for вы можете использовать метод .map(), который будет генерировать новый массив элементов, используя элемент из существующего массива.

Вы можете сделать что-то вроде

<Grid container>
    yourArray.map((item, index) => {
        return(
           <GridItem xs = {3} sm = {3} md = {3}>
                Key {index + 1}
           </GridItem>
           <GridItem xs = {7} sm = {7} md = {7}>
                <input type = "text"/>
           </GridItem>
           <GridItem xs = {2} sm = {2} md = {2}>
           <FormControlLabel
               control = {
            <Checkbox
               checked = {this.state.checked}
               onChange = {this.handleChangeEventCheck('checked')}
               value = {checked}
            />
          }
          />
           </GridItem>
     )
    })
</Grid>

Вы можете попробовать это:

const arrayOfNumbers = Array.from(Array(10).keys());
<Grid container>
  {arrayOfNumbers.map(currentVal => 
     <React.Fragment>
       <GridItem xs = {3} sm = {3} md = {3}>
           Key {currentVal}
        </GridItem>
        <GridItem xs = {7} sm = {7} md = {7}>
           <input type = "text"/>
        </GridItem>
        <GridItem xs = {2} sm = {2} md = {2}>
           <FormControlLabel
              control = {
                <Checkbox
                   checked = {this.state.checked}
                   onChange = {this.handleChangeEventCheck('checked')}
                   value = {checked}
                />
              }
           />
        </GridItem>
     <React.Fragment>
  )}
</Grid>

Итак, у вас есть другие правильные ответы, но вот способ визуализировать эти строки с немного большей структурой. По сути, то же самое, что и другие, но приближает то, что вы пытаетесь сделать, к вашей цели.

class Row extends React.Component {
    render () {
        return (
            <React.Fragment>
                <GridItem
                    xs = {3}
                    sm = {3}
                    md = {3}
                    key = {`col-1`}>
                    {this.props.children}
                </GridItem>
                <GridItem
                    xs = {7}
                    sm = {7}
                    md = {7}
                    key = {`col-2`}>
                    <input type = "text" />
                </GridItem>
                <GridItem
                    xs = {2}
                    sm = {2}
                    md = {2}
                    key = {`col-3`}>
                    <FormControlLabel
                        control = {
                            <Checkbox
                                checked = {this.state.checked}
                                onChange = {this.handleChangeEventCheck}
                                value = {checked}
                            />
                        }
                    />
                </GridItem>
            </React.Fragment>
        );
    }

    handleChangeEventCheck = index => {
        return this.props.onChangeCheck(index);
    }
}

class Table extends React.Component {
    render () {
        const rows = Array.from(Array(10).keys());

        // This below expects `this.handleChangeEventCheck('checked')` to return a new function accepting the row index as its param.
        const rowEls = rows.map(( row, i ) => (
            <Row
                key = {`row-${i}-${row}`}
                onChangeCheck = {this.handleChangeEventCheck('checked')}>
                Key {i}
            </Row>
        ));

        return (
            <Grid container>
                {rowEls}
            </Grid>
        );
    }
}