Не рендерится компонент

import './Form.css'
import React, { Component } from 'react'
import axios from 'axios'
import Comment from "../comment/Comment";
 
export default class Form extends Component {
    
    constructor(props){
        super(props)
 
        this.state={
            name: "",
            text: "",
            comments: []
        }
 
        this.onNameChange = this.onNameChange.bind(this);
        this.onTextChange = this.onTextChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }
 
    onNameChange(e) {
        this.setState({ name: e.target.value });
    }
 
    onTextChange(e) {
        this.setState({ text: e.target.value });
    }
 
    clearFields(){
        document.querySelectorAll('.inputInfo').forEach((item) => {
            item.value = ""
        })
    }
 
    loadData() {
        axios.get('/api/Comment').then(resp => {
 
            this.setState({ comments: resp.data });
            console.log(this.state.comments);
        })
    }
 
    onSubmit(e) {
        e.preventDefault();
        const commentName = this.state.name;
        const commentText = this.state.text;
        if (!commentName || !commentText) {
            return;
        }
 
        const data = new FormData();
 
        data.append("Name", commentName);
        data.append("Text", commentText);
        data.append("isLiked", false);
        
        axios({
            method: 'post',
            url: '/api/Comment',
            data: data,
        })
            .then((res) => {
                this.loadData();
            })
            .catch((err) => { throw err });
 
        this.setState({ name: "", text: "" });
        this.clearFields();
    }
 
    componentDidMount(){
        this.loadData();
    }
 
    render() {
        return (
            <section>
                <form id="my-form" onSubmit={this.onSubmit}>
                    <a id="feedback-btn">Нам важлива ваша думка</a>
                    <label htmlFor="in_name">Ім'я:</label>
                    <input className="inputInfo" onChange={this.onNameChange}/>
                    <label htmlFor="text_feedback">Коментар:</label>
                    <textarea className="inputInfo" onChange={this.onTextChange}></textarea>
                    <button type="submit">Залиште відгук</button>
                </form>
                <div id="comments">Коментарі:
                    {this.state.comments.map((comment,id)=>{
                        <Comment key={id} comment={comment} />
                        })
                    }
                </div>
            </section>
        )
    }
}

import React, { Component } from 'react'
 
export default class Comment extends Component {
    constructor(props){
        super(props);
 
        this.state = {data: props.comment};
    }
    
    click(event){
        event.target.classList.toggle("likes");
        
    }
 
    componentDidMount(){
        console.log("I'm inside component")
        console.log(this.state.data);
    }
 
    render() {
        return (
            <div>
                <div className="comment-name">{this.props.comment.name}: </div>
                <div className="comment-text">{this.props.comment.text}</div>
                <i className="fas fa-heart" onClick={this.click}></i>
            </div>
        )
    }
}