Paginaton with ReactJS

I have this pagination app. And it is working successfully. You can see the app working in this link: https://codepen.io/PiotrBerebecki/pen/pEYPbY

class TodoApp extends React.Component { constructor() { super(); this.state = { todos: ['a','b','c','d','e','f','g','h','i','j','k'], currentPage: 1, todosPerPage: 3 }; this.handleClick = this.handleClick.bind(this); } handleClick(event) { this.setState({ currentPage: Number(event.target.id) }); } render() { const { todos, currentPage, todosPerPage } = this.state; // Logic for displaying current todos const indexOfLastTodo = currentPage * todosPerPage; const indexOfFirstTodo = indexOfLastTodo - todosPerPage; const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo); const renderTodos = currentTodos.map((todo, index) => { return <li key={index}>{todo}</li>; }); // Logic for displaying page numbers const pageNumbers = []; for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) { pageNumbers.push(i); } const renderPageNumbers = pageNumbers.map(number => { return ( <li key={number} id={number} onClick={this.handleClick} > {number} </li> ); }); return ( <div> <ul> {renderTodos} </ul> <ul id="page-numbers"> {renderPageNumbers} </ul> </div> ); } } ReactDOM.render( <TodoApp />, document.getElementById('app') ); 

So I would like to change the initial array to a associative array, by putting a new key 'elements' like you can see below:

 "todos": { "elements": ['a','b','c','d','e','f','g','h','i','j','k'] }, 

How can I catch these datas after this change? I have tried this way:

const currentTodos = todos.map((t, index)=>{ t.elements.map((e,index)=>{ e.slice(indexOfFirstTodo, indexOfLastTodo); }) }) 

And it didn't work