Button is not displaying correctly in ReactJS

Question

I'm trying to make pagination for my web-page,I've set limit to 10 items per page. Problem is whenever I'm adding 11th item New page button is not being displayed,It only appears after I add 12th item.

Any suggestions?

Add Function:

    addItem = () => {
        const {addItems, setPageCount} = this.props.actions;
        let userName = localStorage.getItem('username')

        if (this.inpRef.current.value === '') {
            return alert('We dont do that here....')
        } else {
            axios
                .post(`http://localhost:8080/add`, {
                    username: userName,
                    todo: this.inpRef.current.value,
                    checked: false,
                })
                .then((res) => {
                    const {todo, checked, _id} = res.data;
                    addItems(todo, checked, _id);
                    console.log('res', res)
                })
                .catch((err) => {
                    console.log("err", err);
                });
            this.inpRef.current.value = "";
            setPageCount()

        }
    }

Slicing in render :

    const {todos, currentPage, itemsPerPage} = this.props;
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = todos.slice(indexOfFirstItem, indexOfLastItem);

setPageCount function :

    case actionTypes.PAGE_COUNT:
    const setPageCount =  Math.ceil(todos.length / 10 )
    return {
        ...state,
        pageCount: setPageCount
    }

It worked,Thank you Very much,If you want you can add this to the Answers so I can upvote it and accept the answer — Roffy bc
– Roffy bc, Commented Jun 18, 2020 at 10:09

Akhil P · Accepted Answer · 2020-06-18 10:11:10Z

1

Why are you adding extra 1 here const setPageCount = Math.ceil(todos.length / 10 ) + 1. I think you should use floor instead ceil. As you can see if you have 1 todo item. Math.ceil(1/10) + 1 = 2 which means you have only 1 item but you're showing 2 pages.

answered Jun 18, 2020 at 10:11

Akhil P

1,6202 gold badges21 silver badges30 bronze badges

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

Comments

Raghul SK · Accepted Answer · 2020-06-18 10:05:10Z

1

It will work asynchronously, so make it as synchronous with the use of promise or async/await.

This link below contains documentation on async.

Click this

Hope this will helpful for your process.

answered Jun 18, 2020 at 10:05

Raghul SK

1,4005 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Button is not displaying correctly in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related