ReactJs how to show list with load more option

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