Returned component in react not defined

Question

I apologize because I'm sure this has been answered somewhere before but for the life of me I can't find it. I'm trying to make a simple comment box using react and I keep getting the error:

./src/CommentBox.js Line 29: 'Comment' is not defined react/jsx-no-undef

I read online that needs to be uppercase. I've tried it lower case and my page loads without error but / is missing. Sorry if i'm using the wrong terms. I'm new at this.

Thanks!

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


class CommentBox extends React.Component {
render () {
  const comment = this._getComments();
  const commentCount = `{comment.length}`;
  return (

    <div className = "comment-box">
    <h3>COMMENTS</h3>
    <h4 className = "commentCount">
    {this._getCommentsTitle(comment.length)} </h4>
    <div className = "comments">
    {comment}
    </div>
    </div>
  );
}

_getComments(){

  const commentList = [
  {id: 1, author: 'Michael Perez', body: 'Awesome Pictures!'},
  {id: 2, author: 'Tofu Kaplan', body: 'Looks like fun but happy you 
  are home :)'}
  ];

  return commentList.map((comment) => {
    return(
        < Comment
        author = {comment.author} body = {comment.body} key = 
        {comment.id} />
    )
  });
}
_getCommentsTitle(commentCount){
  if (commentCount === 1){
  return "1 comment";
  } else {
  return `${commentCount} comments`
  }
}
}

Answer 1

您还没有创建任何组件评论

Answer 2

You named your React Component CommentBox , not Comment . Replace Comment with proper Component name.

Answer 3

导入评论组件。

  import Comment from 'Comment component file name';