Change innerText of Button ReactJS

Question

I want to change Check All Button inner text to the Uncheck All after all the checkboxes will be checked. Here's my code. Any suggestions?

 checkAllCheckBox = () => {
    let {todos} = this.state
    let newArray = [...todos]
    if (newArray.length !==0) {
        newArray.forEach(item => {
            if (item.checked === true) {
                item.checked = false
            } else {
                item.checked = true
            }
            this.setState({todos: newArray})
        })
        console.log('----todos', todos)
    }
}

render() {


    const {itemsPerPage, currentPage, todos} = this.state;

    console.log('--------todos', todos);

    const end = currentPage * itemsPerPage
    const start = end - itemsPerPage
    const currentItems = todos.slice(start, end);
    return <div className={"App"}>
        <div className="App-header">
            <h2>Welcome to To-Do List App</h2>
        </div>
        <input ref={this.inpRef} onKeyPress={this.handleKeyPress} name={''} type='text'/>
        <button onClick={() => this.addItem()} className={'btn btn-primary'}>Add</button>
        <button  onClick={() => this.checkAllCheckBox()}
          className={'btn btn-primary'}>Check All</button>
        <ul>
            {
                currentItems.map(todoItem => {
                    return <ListItem
                        key={todoItem._id}
                        todoItem={todoItem}
                        deleteItem={this.deleteItem}
                        editItem={this.editItem}
                        submitEdit={this.submitEdit}
                        deleteData = {this.deleteData}
                    />
                })
            }
            <div>
                {this.renderPagination()}
            </div>
        </ul>
    </div>
};
}

export default App;

Answer 1

Replace Check All with {this.state.todos.every(todo => todo.checked)? "Uncheck All": "Check All"} {this.state.todos.every(todo => todo.checked)? "Uncheck All": "Check All"} .