Строка не выводится в цикле foreach

Question

Я новичок в реакции и пытаюсь создать цикл foreach. Однако, когда он выводится в браузере, он показывает примерно так:

[object Object][object Object][object Object]

Не уверен, почему это происходит

Ниже мой код, любая помощь будет очень признательна. Спасибо!

const Book =({book_info})=> {



    let output = "";


    book_info.forEach(book => {
        //console.log(book.title);

        output += <h1> {book.title}</h1>

    });

    console.log(output);
    return <section>

        {output}
    </section>

};

const Library = () => {
    let book_info = [{title:"The sun also rises", author:"Ernest Hemigway",pages: 260},{title:"The sun also rises", author:"Ernest Hemigway",pages: 260},{title:"The sun also rises", author:"Ernest Hemigway",pages: 260}];
    return (

        <div>
           <Book book_info={book_info}/>
        </div>
    )
};

Answer 1

Проблема с этой строкой:

output += <h1> {book.title}</h1>

Она фактически перебирает book_info и преобразует компонент реагирования h1 в строку, которая [object Object].

То, что вы хотите сделать, это:

return <section>
  {book_info.map(book => <h1>{book.title}</h1>)}
</section>

Это перебирает book_info и отображает элемент реагирования как дочерний элемент <section>.