Как исправить ошибку «Functions are not valid as a React child»?

Question

[GIRU]

Не могу разобраться почему выходит ошибка

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it

Имею вот такой компонент:

import { CommentsForm } from '../forms/CommentsForm';
import { Comment } from '../Comment';

// Mock
import posts from '../../mock-data/posts.json';
import {  LikeIcon } from '../../theme/assets/like';
import {  CommentIcon } from '../../theme/assets/comment';

export const Post = () => {
    const postsItems = posts.map(({
        hash, author, comments, likes, body, created,
    }) => {
        return (
            <section key = { hash } className = 'post'>
                <span className = 'cross'></span>
                <img src = { author.avatar } alt = 'avatar' />
                <a>{ author.name }</a>
                <time>{ created }</time>
                <p>{ body }</p>
                <div className = 'reaction-controls'>
                    <section className = 'like'>
                        <div>
                            <span>{ likes.length }</span>
                        </div>
                        <span className = 'icon'>
                            { LikeIcon } Like
                        </span>
                    </section>
                    <span className = 'comment'>
                        { comments.length } comments
                    </span>
                </div>
                <CommentsForm />
                <hr className = 'separator' />
                <Comment />
            </section>
        );
    });

    return (
        <div className = 'posts-container' style = { { position: 'relative' } }>
            { postsItems }
        </div>
    );
};

Что я делаю не так и как решить проблему?

Answer 1

[0xD34F]

Что я делаю не так

В сообщении об ошибке сказано.

как решить проблему?

Найти у себя в коде косяк, о котором говорится в сообщении об ошибке и исправить его (как именно исправить - в сообщении об ошибке тоже кстати сказано).

Я бы предположил, что стоит сделать следующее: { LikeIcon } ---> <LikeIcon />.

Comments

[GIRU]

капец, спасибо)))) блин