TypeError .map () не является функцией

Question

Новичок ie вопрос от кого-то, кто начинает с React.

У меня есть function, который передает два подпорки:

function Turn(author, books) {
  return (<div className="row turn" style={{backgroundColor: "white"}}>
      <div className="col-4 offset-1">
        <img src ={author.imageUrl} className="authorimage" alt="Author"></img>
      </div>
      <div className="col-6">
        {books.map((title) => <p>{title}</p>)}
      </div>
    </div>);
}

В отдельном JS файл в той же папке, у меня есть следующее:

const authors = [
  {
    name: 'Mark Twain',
    imageUrl: 'images/authors/marktwain.jpg',
    imageSource: 'Wikimedia Commons',
    books: ['The Adventures of Huckleberry Finn']
  }
];

const state = {
  turnData: {
    author: authors[0],
    books: authors[0].books
  }
};

ReactDOM.render(
  <React.StrictMode>
    <AuthorQuiz {...state} />
  </React.StrictMode>,
  document.getElementById('root')
);

Turn отображается как часть функции AuthorQuiz, передавая состояние turnData как реквизиты следующим образом:

function AuthorQuiz({turnData}) {
  return (
    <div className="container-fluid">
      <Hero/>
      <Turn {...turnData}/>
      <Continue/>
      <Footer />
    </div>
  );
}

Затем, запустив это на localhost, я получаю:

Это как-то связано с тем, как объявлено books? При наведении курсора на books в моей переменной состояния оно отображается как string[]. Любая помощь, чтобы разблокировать эту ситуацию будет принята с благодарностью.

Answer 1

Заменить:

function Turn(author, books) {

на

function Turn({ author, books }) {

Это объект поддержки, а не отдельные аргументы.