Class based component is not working as expected in ReactJs appication

Question

I am trying to show the content of my class-based component in part of the functional component but it is not working. class-based component:

class commentForm extends Component {
    render() {
        return(
            <div>
                <h1>Hello</h1>
                <Button class="btn btn-light"><span className="fa fa-comment-o"></span> Submit 
                comment</Button>
            </div>
        );
    }
}

Functional component:

function RenderComments({comments})
{
    if(comments!=null)
    {
        return (
            <div className="col-12 col-md-5 m-1">
                <h4>Comments</h4>
                <ul className="list-unstyled">
                    {comments.map((comment)=>{
                        return(
                            <li key={comment.id}>
                                <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>
                            </li>
                        );
                    })}
                </ul>                
                <commentForm />
                {commentForm}
            </div>
        )
    }
    else{
        return(
            <div></div>
        );
    }
}

.

Here I want to display the content of commentForm from RenderComments. I am not getting any error but code is not displaying the content of commentForm on frontend.

Answer 1

You should name your component starting with an uppercase letter, commentForm should be renamed as class CommentForm extends Component {}.

Form the React docs:

User-Defined Components Must Be Capitalized When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.