How to import components in React Js? - reactjs

Question

I have a error of Module not found. I think that such error is because of lack of a file or directory .However I have checked more than 30 times at that particular location and even for typos ,I don't think i have any mistake here.
Here is my code for DishdetailComponent.js
import React,{Component} from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, CardBody, CardText} from 'reactstrap';
class Dishdetail extends Component{
constructor(props){
super(props);
}
render(){
if(this.props.dish!=null){
return(
<div className="container">
<div className="row">
<div className="col-12 col-md-5 m-1">
<Card>
<CardImg width="100%" object src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
</div>
</div>
</div>
)
}
else{
return <div></div>
}
}
}
export default Dishdetail;
I am calling this component from Menucomponent.js file.It has following code:
import React,{Component} from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, CardBody, CardText} from 'reactstrap';
import Dishdetail from './Components/DishdetailComponent';
class Menu extends Component{
constructor(props){
super(props);
this.state={
selectedDish:null
};
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 col-md-5 m-1">
<Card onClick={()=>this.onDishSelect(dish)}>
<CardImg width="100%" object src={dish.image} alt={dish.name} />
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
</div>
);
});
return (
<div className="container">
<div className="row">
{menu}
</div>
{/* {this.renderDish(this.state.selectedDish)} */}
<Dishdetail dish={this.state.selectedDish}/>
</div>
);
}
}
export default Menu;
The hierarchy of my code follows,
-src(folder)
-Components(sub-folder)
-menucomponent.js
-DishdetailComponent.js
The file I want to import to and the file which will recieve are in same folder Components.

Answer 1

Given your folder structure that you have provided, aren't menuComponent and dishDetailComponent in the same folder? perhaps you need to change your import line to
import Dishdetail from './DishdetailComponent';
as that is the relative path to the file from which you are calling the import.

Answer 2

By looking at your folder structure,
Both of the components are in same directory.
Then you will have to import it as
import Dishdetail from "./DishdetailComponent";
To avoid this kind of overhead of importing, you can simplify it by adding a jsconfig.json file at your root directory and configure as below.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
This is to specify an absolute import path and now you can import it like
import Dishdetail from "Components/DishdetailComponent";

Answer 3

You have put the MenuComponent and the DishDetail Component in the same folder, so you can do
import Dishdetail from "./DishdetailComponent"
You should use a relative path as both you components are in the same folder and the
./ tells the program to look in the same folder as the current file is in. As you're using ./ in the MenuComponent, which is in the Components folder, ./ looks inside the components folder.
./Components/DishdetailComponent searches Components directory in the folder that MenuComponent is in, and since there is no such directory in that folder, it throws an error.

Answer 4

It seems both files are in the same level
Try using
import Dishdetail from './DishdetailComponent';