Creating button with Loop ReactJS

Question

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

you never return the buttons elements in renderPagination try return pageCount.map((page, index) => {return <button />}) — Hai Alaluf
– Hai Alaluf, Commented Jun 11, 2020 at 10:09
I posted whole component code,also thank you for the answer Hai alaluf — RoffyBC
– RoffyBC, Commented Jun 11, 2020 at 10:11

Ardy Febriansyah · Accepted Answer · 2020-06-11 10:12:59Z

3

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
 }

answered Jun 11, 2020 at 10:12

Ardy Febriansyah

7681 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating button with Loop ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related