Reactjs Importing from the same directory

Question

I'm builing a TODO app with Reactjs, on my components folder I have a class called TaskList with this code to iterate on the tasks:

import React, { Component } from 'react';
import {connect} from 'react-redux';

class TaskList extends Component {
    render(){
        return(
            <table>
                <thead>
                    <tr>
                        <th>Tasks</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.tasks.map((task,index) => <Task key={index} task={task} />)}
                </tbody>
            </table>
        );
    }
}

function MapStateToProps(state){
    return{
        tasks:state.tasks
    }
}

export default connect (MapStateToProps)(TaskList);

Also on the components folder I have a class called Task that is used on my TaskList class:

Task:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {DeleteTask} from '../../redux/actions';

class Task extends Component {
    render(){
        return(
            <tr>
                <td>
                    {this.props.task}
                </td>
                <td>
                    <button onClick = {() => this.props.DeleteTask(this.props.id)}>Delete</button>
                </td>
            </tr>

        );
    }
}

function MapDispatchToProps(dispatch){
    return bindActionCreators({DeleteTask},dispatch);
}

export default connect (() => {return {};},MapDispatchToProps)(Task);

My problem here is that I'm having the error Task is not defined because I'm not importing Task into Tasklist. On TaskList I've already tried:

import Task from './components/task';
import Task from 'task'; //as it's on the same directory
import Task from './task';

And nothing is working. Any ideas on this?

Answer 1

I solved the error Myself, the import should be

 Import Task from '../task' 

Answer 2

I know the OP solved for OP, but it did not work for me. Here is what I had to do:

import Task from '../components/task'

After little bit of investigation, I found that the project tree starts from the project root, so relative path names have to be traced from the current file location, then traverse up (../) and down the tree (subdirName/) to the imported file, if you want to specify relative path. It is also possible to specify absolute path like:

import Task from 'C:/Users/devusr1/source/repos/React/hello-world/src/components/task.js'

Both relative and absolute paths worked for me (I am using nodejs.)

What did not work:

.

./

../components

./src/components/task