× Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {автор, цитата}). Если вы хотите визуализировать коллекцию дочерних элементов, используйте массив

Question

Я пытаюсь передать объект в компонент React следующим образом, но получаю вышеуказанную ошибку:

class RandomQuoteBox extends React.Component{
    render(){
      return(
        <div class="container">
          <Quote />
            <div class="row">
              <div class="col">
              </div>
              <div class="col-8">
                <div class="card" style={{
                  backgroundColor: '#FFDC00',
                  width: '500px',
                  height: '300px',
                  margin: '0 auto'
                  }}>
                    <div>
                      <Author {...QUOTES}/>
                    </div>
                    <div>
                      <Button />
                    </div>
                  </div>
                </div>
              <div class="col">
                </div>
            </div>
          </div>
        );
    }
}

Это цитаты объекта:

    const QUOTES = [
  {author: 'test 1', quote: 'tester 1'},
  {author: 'test 2', quote: 'tester 2'},
  {author: 'test 3', quote: 'tester 3'},
  {author: 'test 4', quote: 'tester 4'},
  {author: 'test 5', quote: 'tester 5'},
  {author: 'test 6', quote: 'tester 6'},
];

И вот функция Author:

    const Author =  (props) => {
  return <p>{props.quotes}</p>
}

Когда я передаю массив непосредственно в компонент RandomQuote, он отображается правильно. Однако я хотел бы иметь внешний объект, который содержит ключи, автора и цитаты. Затем визуализируйте компоненты Author и Quote соответственно. (Я не перечислял здесь компонент Quote, потому что, как только я выясню один, я смогу это выяснить).

Answer 1

Я думаю, что вы ищете, чтобы сделать это:

<div>
{ QUOTES.map(quote => <Author quote={quote} /> )}
</div>

const Author = quote => {
  return <p>{quote.author} says {quote.quote}<p>
}

QUOTES является массивом, поэтому для его отображения вам нужно использовать map().

Answer 2

Приведенное ниже решение сработало для меня

function AuthorPrint({authors}) {
      return authors.map(author => (
        <p>{author.name}</p>
      ))
    }


<div>
   <AuthorPrint authors={QUOTES}/>
</div>


const QUOTES = [
  {name: 'test 1', quote: 'tester 1'},
  {name: 'test 2', quote: 'tester 2'},
  {name: 'test 3', quote: 'tester 3'},
  {name: 'test 4', quote: 'tester 4'},
  {name: 'test 5', quote: 'tester 5'},
  {name: 'test 6', quote: 'tester 6'},
];