Javascript 使用循环创建按钮

我是react的新手，我正在制作简单易用的应用程序，我已经实现了添加、删除、编辑，现在我正在进行分页。 问题是我正在尝试创建一个循环，它将创建多个分页按钮，例如：如果有5个列表项，那么应该有1个按钮，如果有10个列表项，那么应该有2个…等等

我试着做：

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>
        };
    }

状态={
输入值：“”，
待办事项：[]，
当前页面：1，
页数：1，
};
inpRef=createRef（）；
setPageCount=（）=>{
设{todos}=this.state
this.setState（{pageCount:Math.ceil（todos.length/5）}）
console.log（'--this.state.pageCount'，this.state.pageCount）；
}
分页显示=（）=>{
console.log（'helo'）
}
渲染图像=（）=>{
让{pageCount，currentPage}=this.state
for（设i=1；i
{pageCount}
}
}
render（）{
const{todos}=this.state；
返回
欢迎使用待办事项列表应用程序
this.addItem（）}className={'btn btn primary'}>Add

{
todos.map（todoItem=>）
}
{this.renderPagination（）}

};
}

它不工作，我不知道如何修复我的循环。请帮助

renderPagination（）

不返回要渲染的组件，请这样尝试

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
 }

renderPagination=（）=>{
让{pageCount，currentPage}=this.state
常量分页=[]
for（设i=1；i
{pageCount}
)
}
返回分页
}

你能提供你的整个组件代码吗？你永远不会返回renderPagination中的按钮元素，请尝试

返回pageCount.map（（页面，索引）=>{return}）

我发布了整个组件代码，也感谢你的回答