import React from 'react';
export default class ListItem extends React.Component{
    render(){
        let {item, toggleChange, handleDel} = this.props;
        return (<li className="list-group-item">
            <div className="row">
                <div className="col-md-1 col-sm-1"><input type="checkbox" checked={item.completed} onChange={()=>toggleChange(item.id)}/></div>
                <div className="col-md-10 col-sm-10">
                    <p style={{
                        textDecoration:item.completed?'line-through':''
                    }}>{item.title}</p>
                </div>
                <div className="col-md-1 col-sm-1">
                    <button className="btn btn-danger btn-sm"
                        onClick={()=>handleDel(item.id)}
                    >&times;</button>
                </div>
            </div>
        </li>)
    }
}