Получение ошибки: объекты недопустимы как дочерний элемент React

Question

Скриншот элемента массива IssueList, который является объектом.

import React from 'react';

const IssueList = (props)=>{
    const issues = props.issueList.map((issue)=>{
        return (
            <div key={issue.id}>
                <span>
                    <p><strong>Issue Title: </strong>{issue.title}   </p>
                    <p>   <strong>Created By : </strong>{issue.user["login"]}</p>
                </span>   
                <p><strong>Assigned to: </strong>{issue.assignee}</p>
                <p><strong>Issue Description: </strong>{issue.body}</p>
            </div>
        )

    });

    return <div>{issues}</div>;
}

Я пытаюсь визуализировать div с некоторой информацией из массива объектов IssueList. Приведенный выше код выдает следующую ошибку:

Error: Objects are not valid as a React child (found: object with keys {login, id, node_id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin}). If you meant to render a collection of children, use an array instead.
    in p (at IssueList.js:12)
    in div (at IssueList.js:7)
    in div (at IssueList.js:19)

IssueList представляет собой массив объектов

Answer 1

Итак, у вас есть массив issueList, который вы хотите отобразить в виде списка компонентов (скажем, IssueList). Предполагая, что ваша проблема настроена следующим образом

issue = {
  id: "ID string",
  title: "Title",
  user: "User name",
  assignee: "Asignee name",
  body: "body string ..... "
}

Вы можете сначала настроить свой IssueList компонент следующим образом

const IssueList = ({ issueList }) => (
  <div>
  {
    issueList.map((issue) => (
      <div key={issue.id}>
        <span>
           <p><strong>Issue Title: </strong>{issue.title}   </p>
           <p>   <strong>Created By : </strong>{issue.user}</p>
        </span>
        <p><strong>Assigned to: </strong>{issue.assignee}</p>
        <p><strong>Issue Description: </strong>{issue.body}</p>
      </div>
    )
  }
  </div>
)

Теперь вы можете использовать IssueList в любом месте.