App.js

import React, { useState, Fragment } from 'react';
import { Container, Row, Col } from 'react-bootstrap';

import { TaskProvider } from './components/TaskContext';
import { withTaskContext } from './components/withTaskContext';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';

function App() {

    //The TaskList component is passed through a withTaskContext HOC that returns a component 
    // that can be rendered on a page
    const TaskListWithHOC = withTaskContext(TaskList);

    return (
        <Container className="app-container">
            <Fragment>
            	<div className="App">
                    <TaskProvider>
                        <Container>
                            <Row>
                                <Col>
                                    <h5 className="text-center p-4">Task Management App</h5>
                                </Col>
                            </Row>
                            <Row>
                                <Col md={6}>
                                    <TaskForm />
                                </Col>
                                <Col md={6}>
                                    <h6>Task List</h6>
                                    <TaskList />
                                    <h6>Task List With HOC</h6>
                                    <TaskListWithHOC/>
                                </Col>
                            </Row>
                        </Container>                        
                    </TaskProvider>
                </div>
            </Fragment>
        </Container>
    );
}

export default App;