App.js

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

class App extends Component {
  constructor (props) {
    super(props)
	this.state = {
      todos: [
      	{title: '1', cleared: false},
      	{title: '2', cleared: false},
      	{title: '3', cleared: false},
      	{title: '4', cleared: true}
      ]
	}
  }
  render () {
    const unClearTodos = this.state.todos.filter(row => row.cleared === false).map((item, key) =>
	<ListGroupItem>
	  <InputGroup>
		<InputGroup.Checkbox/>
		<FormLabel>{item.title}</FormLabel>
	  </InputGroup>
	</ListGroupItem>
	)
    const clearedTodos = this.state.todos.filter(row => row.cleared === true).map((item, key) =>
		<ListGroupItem>{item.title}</ListGroupItem>
	)
	return (
	<div>
	  <Row>
		<Col>
		  <Alert variant="primary">TODO</Alert>
		  <ListGroup>
			<ListGroupItem>
			  <InputGroup>
				<FormControl/>
			  </InputGroup>
			</ListGroupItem>
			{unClearTodos}
		  </ListGroup>
		</Col>
		<Col>
		  <Alert variant="success">FINISHED</Alert>
		  <ListGroup>
			{clearedTodos}
		  </ListGroup>
		</Col>
	  </Row>
	</div>
	)
  }
}

export default App