Как передать размер массива как шаблон с шаблонным типом?

**index.js**

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux';
import store, { history } from './store';

const route = (
  <Provider store={store}>
  <BrowserRouter>
        <App />
  </BrowserRouter>
  </Provider>
)
render(route,document.getElementById('app'))

**action/listItemAction.js**

export const ListItemSuccess = (data) => {
    return {type: 'GET_LIST_ITEMS'};
}

export const getListItems = () => {
    return (dispatch) => {
        return axios.get('http://localhost:5000/api/listitems')
        .then(res => {
           dispatch(ListItemSuccess(res));
        })
        .catch(error=>{
            throw(error);
        })      
    };
}

**reducers/listItems.js**

const listItems = (state = [], action) => {
  switch(action.type){
    case 'GET_LIST_ITEMS':
      return action.res.data;
    default:
      return state;
  }
}

export default listItems;

**store.js**

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'
import listItems from './reducers/listItems.js';

const store = createStore(listItems,  compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  ));

export default store;

**App.js**

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import './App.scss';
import getListItems from './action/listItemAction.js

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true,
    };

  }
  componentWillMount() {
    this.props.getListItems().then(() => {
      this.setState({data: this.props.listItems, isLoading:false});
    }).catch(error => {
        throw(error);
    });
  }
  render() {
    return (
      <div className="App">
        <h3>Grocery List</h3>
        {this.state.isLoading ? <p>Loading...</p>
          : this.state.error ? <p>Error during fetch!</p>
          : (
              <ul>
                this.state.data.map(item => <li>{item}</li>)
              </ul>
            )}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
    return {
      listItems: state.listItems
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        getListItems: bindActionCreators(getListItems, dispatch),
    };
};

export default connect(mapStateToProps,mapDispatchToProps)(App);