Uncaught Reference Error: collection is not defined---in meteor app

this is the .js file which lies at imports/ui of my meteor project.

    import React from 'react';
    import {Tasks} from './../api/tc';

    export default class Task extends React.Component{
   render(){
return(

 <div key={this.props.task._id} className='item'>
    <p>
    {this.props.task.name}
    </p>
    <p className='prioritypoints'>
    priority level : {this.props.task.score}
    </p>
    <button className='button button--round' onClick={() => tc.remove({_id: this.props.task._id})}>X</button>
    <button className='button button--round' onClick={()=>
    tc.update({_id: this.props.task._id}, {$inc: {score:1}})}>
    +1</button>
    <button className='button button--round' onClick={()=>
    {tc.update({_id: this.props.task._id},{$inc: {score:-1}})}}>
    -1</button>

    </div>
);
      }
    };

"tc" is the name of my mongoDB collection defined at imports/api/tc.The button's onClick event is not responding as task_collection is undefined according to the console.

tc.js:

    import {Mongo} from 'meteor/mongo';
    export const Tasks = new Mongo.Collection('tc');

why is such a problem occuring even after I have imported the collection in this file?