Display new button on onClick(); ReactJS

Question

I'm new to the reactJS and I'm making simple To-do App,I already implemented Edit and Delete and now I'm stuck on Pagination,I'm trying to display new button on certain circumstances but It's not working and I'm confused. The problem is It is not displaying a new button

class App extends Component {
state = {
    inputValue: '',
    todos: [],
    currentPage:1,
    pageCount:1,
};

setPageCount = () => {
        let {todos} = this.state
      this.setState({pageCount: Math.ceil(todos.length / 5)})
        console.log('--------this.state.pageCount', this.state.pageCount );
}

renderPagination = () => {
    let {pageCount} = this.state
    for(let i=0; i<= pageCount; i++) {
        return <button onClick={this.paginationDisplay()}>
            {pageCount}
        </button>
    }
}

paginationDisplay = () => {
    console.log('Hello world')

addItem = () => {
        let {inputValue, todos} = this.state
        this.setState({todos: [...todos, {inputValue, id: uuidv4()}]})
        this.setPageCount()
        this.renderPagination()

    }

render() {
        return <div className={"App"}>
            <div className="App-header">
                <h2>Welcome to To-Do List App</h2>
            </div>
            <input onChange={this.handleInputValue} name={''} type='text'/>
            <button onClick={() => this.addItem()} className={'btn btn-primary'}>Add</button>
            <ul>
                {
                    this.state.todos.map(todoItem => <ListItem
                        key={todoItem.id}
                        todoItem={todoItem}
                        deleteItem={this.deleteItem}
                        editItem={this.editItem}
                        submitEdit={this.submitEdit}
                    />)
                }
            </ul>
        </div>
    };
}

render() { return <div className={"App"}> <div className="App-header"> <h2>Welcome to To-Do List App</h2> </div> <input onChange={this.handleInputValue} name={''} type='text'/> <button onClick={() => this.addItem()} className={'btn btn-primary'}>Add</button> <ul> { this.state.todos.map(todoItem => <ListItem key={todoItem.id} todoItem={todoItem} deleteItem={this.deleteItem} editItem={this.editItem} submitEdit={this.submitEdit} />) } </ul> </div> }; } — RoffyBC
– RoffyBC, Commented Jun 11, 2020 at 7:08

mgm793 · Accepted Answer · 2020-06-11 07:15:37Z

You need to move renderPaginator function to render like this.

addItem = () => {
    let { inputValue, todos } = this.state;
    this.setState({ todos: [...todos, { inputValue, id: uuid() }] });
    this.setPageCount();
  };
  render() {
    return (
      <div className={"App"}>
        <div className="App-header">
          <h2>Welcome to To-Do List App</h2>{" "}
        </div>
        <input onChange={this.handleInputValue} name={""} type="text" />{" "}
        <button onClick={() => this.addItem()} className={"btn btn-primary"}>
          Add
        </button>
        <ul>
          {" "}
          {this.state.todos.map(todoItem => (
            <div
              key={todoItem.id}
              todoItem={todoItem}
              deleteItem={this.deleteItem}
              editItem={this.editItem}
              submitEdit={this.submitEdit}
            />
          ))}
        </ul>
        {this.renderPagination()}
      </div>
    );
  }

Every time you update the state using setState function render function is called.

Collectives™ on Stack Overflow

Display new button on onClick(); 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