TodoList/src/components/Li.js

32 lines
814 B
JavaScript

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './Li.css';
class Li extends React.Component {
setMark = () => (
this.props.isDone ? 'marked' : 'unMarked'
)
render(){
const {changeMark, id, isDone, at, todo, close} = this.props
return (
<div>
<li className={this.setMark()}>
<div className="form-check">
<label className="form-check-label">
<input className={this.setMark()} type="checkbox" onChange={changeMark.bind(this, id)} checked={isDone} />
{todo} At {at}
<i className="input-helper"></i>
</label>
</div>
</li>
<i className="material-icons dp48" onClick={close.bind(this, id)}>close</i>
</div>
)
}
}
export default Li