TaskList.js

import React from 'react';
import { TaskConsumer } from './TaskContext';

function TaskList() {
	
	// Here we are actually distructing the tasks and dispatch methods from the TaskConsumer which has the 
	// taskContext object.
	return (
		<TaskConsumer>
		    {({ tasks, dispatch }) => (
	     		<>
		     		{tasks.map(task => (
		     			<div key={task.id} className="d-flex justify-content-between p-1">
				            <input type="checkbox" checked={task.completed}
				              onChange={() => dispatch({type: 'UPDATE_TASK', payload: { id: task.id, completed: !task.completed } }) }
				            />
          					{task.title}
          					{!task.completed && (
          					    <button className="btn btn-sm btn-danger" style={{ borderRadius:100 }} onClick={() => dispatch({ type: 'DELETE_TASK', payload: task.id }) }>X</button>
							)}
		     			</div>
		     		))}
	     		</>
		    )}
		</TaskConsumer>
	);
}

export default TaskList;