Мини-компонент не отображается на странице

Question

У меня есть компонент:

import { React, useState } from "react";

function CreateNews(props) {
    function createList(news_) {
        news_.forEach(el => {
            const content = el.content;
            return (
                <div className="news">
                    <h3 className="heading">{ content.headline }</h3>
                    <div className="description">{ content.body }</div>
                    <div className="tags">{ content.tags }</div>
                    <a href={`http://localhost:5500/api/news/get/${el.id}`} className="toNews">ссылка</a>
                </div>
            );
        });
    }
    return (
        <div className="blockOfNews">
            {createList(props.news)}
        </div>
    );
}

export default CreateNews;

<CreateNews news={news} />

Почему-то на странице blockOfNews пустой:

Почему в нем не появляется div.news?

Answer 1

Ответ пустой потому что вы ничего не возвращаете из функции createList. Вы просто пробегаете по массиву, модифицируете его и все. Или сделайте вот так:

function CreateNews(props) {
    function createList(news_) {
       return news_.map(el => {
            const content = el.content;
            return (
                <div className="news">
                    <h3 className="heading">{ content.headline }</h3>
                    <div className="description">{ content.body }</div>
                    <div className="tags">{ content.tags }</div>
                    <a href={`http://localhost:5500/api/news/get/${el.id}`} className="toNews">ссылка</a>
                </div>
            );
        });
    }
    return (
        <div className="blockOfNews">
            {createList(props.news)}
        </div>
    );
}

Или можете сделать сразу вот так:

function CreateNews(props) {
    return (
        <div className="blockOfNews">
            {
              props.news.map(news => {
                return (
                  <div className="news">
                  <h3 className="heading">{news.content.headline}</h3>
                  <div className="description">{news.content.body}</div>
                  <div className="tags">{news.content.tags}</div>
                  <a href={`#`} className="toNews">ссылка</a>
              </div>
                )
              })
            }
        </div>
    );
}

БЛОГ НА HUSL

Мини-компонент не отображается на странице

Ответы (1 шт):