Reputation: 189
I'm new to the react and I'm making simple To-Do app application,I already implemented Add,Delete,Edit and now I'm working on Pagination. The problem is I'm trying to create Loop which will create several Buttons for Pagination,For example:If there is 5 list items There shall be 1 button,if there is 10 list items then there shall be 2...etc...
I tried to do:
state = {
inputValue: '',
todos: [],
currentPage:1,
pageCount:1,
};
inpRef = createRef();
setPageCount = () => {
let {todos} = this.state
this.setState({pageCount: Math.ceil(todos.length / 5)})
console.log('--------this.state.pageCount', this.state.pageCount );
}
paginationDisplay = () => {
console.log('helo')
}
renderPagination = () => {
let {pageCount,currentPage} = this.state
for (let i= 1;i<pageCount; i++){
<button onClick={() => {
this.paginationDisplay()
currentPage = i}
}>
{pageCount}
</button>
}
}
render() {
const { todos } = this.state;
return <div className={"App"}>
<div className="App-header">
<h2>Welcome to To-Do List App</h2>
</div>
<input ref={this.inpRef} onKeyPress={this.handleKeyPress} onChange={this.handleInputValue} name={''} type='text'/>
<button onClick={() => this.addItem()} className={'btn btn-primary'}>Add</button>
<ul>
{
todos.map(todoItem => <ListItem
key={todoItem.id}
todoItem={todoItem}
deleteItem={this.deleteItem}
editItem={this.editItem}
submitEdit={this.submitEdit}
/>)
}
{this.renderPagination()}
</ul>
</div>
};
}
It's not working and I don't know how fix my Loop.Please help
Upvotes: 2
Views: 1184
Reputation: 768
The renderPagination()
does not return component to be rendered, try like this
renderPagination = () => {
let {pageCount,currentPage} = this.state
const paging = []
for (let i= 1;i<pageCount; i++){
paging.push(
<button
onClick={() => {
this.paginationDisplay()
currentPage = i
}
}>
{pageCount}
</button>
)
}
return paging
}
Upvotes: 3