Ad

React - How Can I Implement A Checkbox?

- 1 answer

I am creating a ToDo app to teach myself React.

What would be the best way to implement a checkbox feature for my tasks? I am confused about the best place to put it, as well as using state.

As my code stands now, the checkbox does not turn on because it is bound to my data, not the state. Also, would I need to create a new React class for the checkbox? I appreciate any help.

var ToDoContainer = React.createClass({
    getInitialState: function(){
        return {
            name:"Michael",
            tasks:[
                {task:"Go to the gym", completed:false}, 
                {task:"Do yoga", completed:false},
                {task:"Buy groceries", completed:true},
                {task:"Get tire fixed", completed:false}
            ]
        }
    },
    addTask: function(task){
        this.setState({
            tasks:this.state.tasks.concat(task) 
        }); 
    },
    markComplete: function(task){
        console.log('markComplete');
        console.log(task);
    },
    render: function(){

        return (
            <div>
                <h3>Name: {this.state.name}</h3>
                <TaskList tasks={this.state.tasks} check={this.markComplete}/>
                <AddTask addNew={this.addTask} />
            </div>
        )
    }
});

var TaskList = React.createClass({
    handleCheck: function(e){
        console.log('check');
        this.props.check(e.target);
    },
    render: function(){
        var that = this;

        var task = this.props.tasks.map(function(task, index){
                return <li key={index} className={task.completed ? "complete" : "incomplete"} >
                            <input type="checkbox" checked={task.completed} onChange={that.handleCheck} />
                            {task.task}
                        </li>
        });

        return (
            <div>
                <ul>
                    {task}
                </ul>
            </div>
        )
    }
});

var AddTask = React.createClass({
    getInitialState: function(){
        return{
            newTask:""
        }
    },
    handleChange: function(e){
        this.setState({
            newTask:e.target.value
        });
    },
    handleSubmit: function(e){
        e.preventDefault();
        this.props.addNew({task:this.state.newTask, completed:false});
        this.setState({
            newTask:""
        });
    },
    render: function(){
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" value={this.state.newTask} onChange={this.handleChange} />
                    <button disabled={this.state.newTask == ""}>Add Task</button>
                </form>
            </div>
        )
    }
});

ReactDOM.render(, document.getElementById('app'));

Ad

Answer

First in TaskList component you can direct use the event from props like

 <input type="checkbox" checked={task.completed} onChange={that.props.check} value={task.task} />

and your Markcomplete method

markComplete: function(e){
    console.log('markComplete');
    var TempTask=this.state.tasks;
    for(int i=0;i<=TempTask.length;i++)
      {
          if(TempTask[i].task==e.target.value)
          {
              if((e.target).checked) 
               {
                 TempTask[i].completed=true;  
               }
              else
               {
                 TempTask[i].completed=false;
               }
          }
      }
    this.setState({this.state.tasks:TempTask});
},
Ad
source: stackoverflow.com
Ad