How to import components in React Js?

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.

on Menucomponent.js file it must be import Dishdetail from './DishdetailComponent'; — Prabesh Gouli
– Prabesh Gouli, Commented Aug 24, 2020 at 5:57

lanxion · Accepted Answer · 2020-08-24 05:51:12Z

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.

answered Aug 24, 2020 at 5:51

lanxion

1,4301 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lanxion Over a year ago

have a look at the other answers. are you sure you sent the right file structure?

Kevin Moe Myint Myat · Accepted Answer · 2020-08-24 06:04:46Z

1

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";

answered Aug 24, 2020 at 6:04

Kevin Moe Myint Myat

2,1851 gold badge12 silver badges19 bronze badges

1 Comment

Abhilekh Gautam Over a year ago

didn't Worked this way

Dharman · Accepted Answer · 2020-08-24 06:02:43Z

0

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.

edited Aug 24, 2020 at 6:02

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 24, 2020 at 5:57

Riptide

5163 silver badges16 bronze badges

Comments

lanxion · Accepted Answer · 2020-08-24 06:03:51Z

0

It seems both files are in the same level Try using

import Dishdetail from './DishdetailComponent';

edited Aug 24, 2020 at 6:03

lanxion

1,4301 gold badge10 silver badges22 bronze badges

answered Aug 24, 2020 at 5:59

Julio

114 bronze badges

Collectives™ on Stack Overflow

How to import components in React Js?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related