Почему компонент не отображается в реакции js?

Question

Итак, я научился реагировать, но мне нужна помощь во время практики. это может быть долго, но ваша помощь будет оценена. ни один из следующего кода не сработал, поэтому я просто хочу выяснить, что я делаю неправильно. Я установил следующий контекст, который представляет собой массив объектов

import React, {createContext, useState} from 'react';

export const Songlist = createContext()

const TheSongs = (props) => {
    const [songs, setSongs] = useState([
        {title: "deliverance", artist: "opeth", id: 0},
        {title: "civil war", artist: "guns n roses", id: 1},
        {title: "heaven and hell", artist: "black sabbath", id: 2},
        {title: "anesthetize", artist: "porcupine tree", id: 3}
    ])
    const songList = () =>{
        setSongs(songs.forEach(song =>{
            return(
                <div className="container" key={song.id}>
                    <h4>{song.title}</h4>
                    <h3>{song.artist}</h3>
                </div>
            )
        }))
    }
    return ( 
        <Songlist.Provider value={songs, songList}>
            {props.children}
        </Songlist.Provider>
     );
}

export default TheSongs;

Затем я попытался вызвать его в таком компоненте

import React, {useContext} from 'react';
import {Songlist} from '../contexts/TheWorld'

const SongListUI = () => {

    const {songList} = useContext(Songlist)


    return ( 
        <div className="hi">
            {songList}
        </div>
     );
}

export default SongListUI;

Никаких ошибок не произошло, однако вообще ничего не отображалось и div с именем "hi" ничего не содержал.

Затем я просто сохранил массив в контексте и снова вызвал его в компоненте, используя Context, но на этот раз я попробовал что-то другое, и это

import React, {useContext} from 'react';
import {Songlist} from '../contexts/TheWorld'

const SongListUI = () => {

    const {songs} = useContext(Songlist)

    const songList = () =>{
      songs.forEach(song =>{
        return(
            <div className="container" key={song.id}>
                <h4>{song.title}</h4>
                <h3>{song.artist}</h3>
            </div>
        )
    })
}

    return ( 
        <div className="hi">
            {songList}
        </div>
     );
}

export default SongListUI;

Я получил сообщение об ошибке, в котором говорится, что функции не разрешены как реагирующие дочерние элементы, и все еще ничего не отображалось в div, поэтому я снова попробовал что-то другое, вместо этого я применил forEach l oop внутри jsx названия функции, и все же она не работала, и ничего не было отображено внутри "привет" div. поэтому я снял весь контекст и использовал хук useState внутри самого компонента

import React, {useState} from 'react';

const SongListUI = () => {

    const [songs, setSongs] = useState([
        {title: "deliverance", artist: "opeth", id: 0},
        {title: "civil war", artist: "guns n roses", id: 1},
        {title: "heaven and hell", artist: "black sabbath", id: 2},
        {title: "anesthetize", artist: "porcupine tree", id: 3}
    ])

    const songlist = () =>{
        setSongs(songs.forEach(song =>{
            return(
                <div className="container" key={song.id}>
                    <h4>{song.title}</h4>
                    <h3>{song.artist}</h3>
                </div>
            )
        }))
    }


    return ( 
        <div className="hi">
            {songlist}
        </div>
     );
}

export default SongListUI;

не сработал из-за ошибки реагирования потомка, так что

import React, {useState} from 'react';

const SongListUI = () => {

    const [songs, setSongs] = useState([
        {title: "deliverance", artist: "opeth", id: 0},
        {title: "civil war", artist: "guns n roses", id: 1},
        {title: "heaven and hell", artist: "black sabbath", id: 2},
        {title: "anesthetize", artist: "porcupine tree", id: 3}
    ])


    return ( 
        <div className="hi">
            {
                songs.forEach(song =>{
                    return(
                        <div key={song.id}>
                            <h4>{song.title}</h4>
                            <h3>{song.artist}</h3>
                        </div>
                    )
                })
            }
        </div>
     );
}

export default SongListUI;

и до сих пор ничего не работает, поэтому я просто хочу знать, что я делаю не так ...

Answer 1

Возвращаемое значение forEach равно undefined. Можете ли вы попробовать свой последний пример с .map вместо ваших песен?

т.е.

songs.map((song) => <div key={song.id}><h4>{song.title}</h4><h3>{song.artist}</h3></div>)