App.js

import React, { Component } from 'react'
import './App.css'
import {
  Row,
  Col,
  ListGroup,
  ListGroupItem,
  Alert,
  InputGroup,
  FormLabel,
  FormGroup,
  FormControl
} from 'react-bootstrap'

class App extends Component {
  constructor (props) {
	super(props)
	this.state = {
	  input: '',
	  todos: []
	}
  }

  handCheckbox = (idx) => {
	const {todos} = this.state
	let selectedIdx = todos.filter(item => item.idx === idx)[0].idx
	todos[selectedIdx].cleared = !todos[selectedIdx].cleared
	this.setState({
	  todos
	})
  }
  handleClick = (e) => {
	if (e.key === 'Enter') {
	  const {todos} = this.state
	  let array = this.state.todos.map(item => item.idx)
	  let idx = 0
	  if (array.length > 0) {
		idx = Math.max(...array) + 1
	  } else {
		idx = 0
	  }
	  todos.push({idx: idx, title: this.state.input, cleared: false})
	  this.setState({
		todos,
		input: ''
	  })
	}
  }
  handleChange = (event) => {
	this.setState({
	  input: event.target.value
	})
  }

  render () {
	const unClearTodos = this.state.todos.filter(row => row.cleared === false).map((item) =>
	<ListGroupItem key={item.idx}>
	  <InputGroup>
		<InputGroup.Prepend>
		  <InputGroup.Checkbox onClick={this.handCheckbox.bind(this, item.idx)}/>
		</InputGroup.Prepend>
		<FormLabel>{item.title}</FormLabel>
	  </InputGroup>
	</ListGroupItem>
	)
	const clearedTodos = this.state.todos.filter(row => row.cleared === true).map((item) =>
	<ListGroupItem key={item.idx}>{item.title}</ListGroupItem>
	)
	return (
	<div>
	  <Row>
		<Col>
		  <Alert variant="primary">TODO</Alert>
		  <ListGroup>
			<ListGroupItem>
			  <FormGroup>
				<FormControl type="text" onKeyPress={this.handleClick} value={this.state.input}
							 onChange={this.handleChange}/>
			  </FormGroup>
			</ListGroupItem>
			{unClearTodos}
		  </ListGroup>
		</Col>
		<Col>
		  <Alert variant="success">FINISHED</Alert>
		  <ListGroup>
			{clearedTodos}
		  </ListGroup>
		</Col>
	  </Row>
	</div>
	)
  }
}

export default App

handCheckbox 오타 지적하고갑니다 :goza: