Source:  Twitter logo

I am tring to show todo list with load more option. I am appling limit.Limit is apply to list.But when i add loadmore()function. then i get error this.state.limit is null Wher i am wrong.Any one can suggest me. here is my code todoList.jsx

var TodoList=React.createClass({
    render:function(){
    var {todos}=this.props;
    var limit = 5;

    function onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    }
    var renderTodos=()=>{
            return todos.slice(0,this.state.limit).map((todo)=>{
                return(
                        <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
                );
            });

    };

    return(
        <div>
            {renderTodos()}
            <a href="#" onClick={this.onLoadMore}>Load</a>
        </div>
        )
}
});
module.exports=TodoList;

Changes:

1. First define the limit in state variable by using getInitialState method, you didn't define the limit, that's why this.state.limit is null.

2. Define all the functions outside of the render method.

3. Arrow function with renderTodos is not required.

4. Use this keyword to call the renderTodos method like this:

{this.renderTodos()}

Write it like this:

var TodoList=React.createClass({

    getInitialState: function(){
        return {
            limit: 5
        }
    },

    onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    },

    renderTodos: function(){
        return todos.slice(0,this.state.limit).map((todo)=>{
            return(
                <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
            );
        });
    };

    render:function(){
        var {todos} = this.props;
        return(
            <div>
                {this.renderTodos()}
                <a href="#" onClick={this.onLoadMore}>Load</a>
            </div>
        )
    }
});
22 users liked answer #0dislike answer #022
Mayank Shukla profile pic
Mayank Shukla

This is witout button click.

As you all know react components has a function componentDidMount() which gets called automatically when the template of that component is rendered into the DOM. And I have used the same function to add the event listener for scroll into our div iScroll. The scrollTop property of the element will find the scroll position and add it with the clientHeight property. Next, the if condition will check the addition of these two properties is greater or equal to the scroll-bar height or not. If the condition is true the loadMoreItems function will run.

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 10,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >=this.refs.iScroll.scrollHeight){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 3000);
  }

  render() {
    return (
      <div ref="iScroll" style={{ height: "200px", overflow: "auto" }}>
        <ul>
          {this.displayItems()}
        </ul>

        {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}

      </div>
    );
  }
}

This is example

0 users liked answer #1dislike answer #10
skarakas profile pic
skarakas

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).