Import error of a Component File in ReactJS

Question

I am pretty new to React Framework, What I am trying to do is that from my Dishdetail.js I am calling the <Commentform /> component so that it displays me a button Submit Comment button. Dishdetail.js is completely fine so I submitted only part of my code from Dishdetail.js so that it doesn't look cluttered. The problem is for my CommentformComponent.js file component I am getting import errors saying

./src/Components/DishdetailComponent.jsAttempted import error: 'Commentform' is not exported from './CommentformComponent'.

I did write my export from my CommentforComponent.js and here is my full code for CommenforComponent.js file

///THIS IS MY Dishdetail.js file
import {Commentform} from './CommentformComponent';

function RenderComments({comments}){  
        if(comments!=null){           
            const dishComments=comments.map( (comment) => { 
            return( 
                  <ul key={comment.id} className = "list-unstyled">
                 <p>{comment.comment}</p>
                 <p>--{comment.author},{new Intl.DateTimeFormat('en-US', { year: 'numeric',month: 'short', day: '2-digit'}).format(new Date(Date.parse(comment.date)))} </p>
                 </ul>
                  );

        return(
            <div>
                <h4>Comments</h4>
                {dishComments}
                <Commentform />
            </div>
        )
    }
        else{
            return(
                <div></div>
            );
        }
    }

///CommentformComponent.js file
import React, {Component} from 'react';
import {  Button  } from 'reactstrap';
import {Link} from 'react-router-dom';
import {Control,LocalForm,Errors} from 'react-redux-form';

class Commentform extends Component{       
    render(){      
        return(

            <Button type="submit" color="outline-dark">
                <span className="fa fa-pencil fa-lg"></span>Submit Comment
            </Button>
        );
    }

}
export default Commentform;

HermitCrab · Accepted Answer · 2020-05-05 11:11:12Z

1

Just do:

import Commentform from './CommentformComponent';

Importing a component depends on how you export it:

export default Commentform;
import Commentform from './CommentformComponent';

or

export Commentform;
import { Commentform } from './CommentformComponent';

answered May 5, 2020 at 11:11

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

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

2 Comments

A.M.Usmani Over a year ago

Thank you so much it worked....But why did we omit the curly braces from Commentform?

HermitCrab Over a year ago

If you export as default, no curly braces. You use curly braces when you export several components from the same file and without using default

Collectives™ on Stack Overflow

Import error of a Component File in ReactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related