React Вывод элементов списка

const booksDescription = [
  {
id: 1,
bookName: "Понедельник начинается в субботу",
authorNumber: 1
  },
  {
id: 2,
bookName: "Гарри Поттер и Орден Феникса",
authorNumber: 3
  },
  {
id: 3,
bookName: "Сказание о трех свинах",
authorNumber: 4
  }
];

const booksAuthor = [
  {
id: 1,
authorName: "Борис",
authorSurname: "Стругацкий"
  },
  {
id: 2,
authorName: "Аркадий",
authorSurname: "Стругацкий"
  },
  {
id: 3,
authorName: "Джоан",
authorSurname: "Роулинг"
  },
  {
id: 4,
authorName: "Джон",
authorSurname: "Толкиен"
  }
];

function WorkSpace(props) {
  let Books = booksDescription.map((el) => (
<BookItem
  id={el.id}
  key={el.id}
  bookName={el.bookName}
  authorNumber={el.authorNumber}
/>
  ));

  return (
<main className={"main"}>
  <div id="FullListBook" className="BooksAll ">
    {Books}
    {/* <BookArticle/> */}
  </div>
</main>
  );
}

class BookItem extends React.Component {
  render() {
const book = this.props;
const authorsOfBookNumber = book.authorNumber - 1;

const authorOfBookName = booksAuthor[authorsOfBookNumber].authorName;
const authorOfBookSurname = booksAuthor[authorsOfBookNumber].authorSurname;

const authorsOfBookFull = authorOfBookSurname + " " + authorOfBookName;

return (
  <div className="bl_book__item">
    <a className="bl_book__link" href="#">
      <p className="bl_book__name">
        <p className="bl_book__title">{book.bookName}</p>
        <p className="bl_book__author">{authorsOfBookFull}</p>
      </p>
    </a>
  </div>
);
  }
}

class BookArticle extends React.Component {
  render() {
const book = booksDescription[1];
const authorsOfBookNumber = book.authorNumber - 1;

const authorOfBookName = booksAuthor[authorsOfBookNumber].authorName;
const authorOfBookSurname = booksAuthor[authorsOfBookNumber].authorSurname;

const authorsOfBookFull = authorOfBookSurname + " " + authorOfBookName;

return (
  <article>
    Тут описание книги {book.bookName} от автора {authorsOfBookFull}
  </article>
);
  }
}

function App() {
  return <WorkSpace />;
}

ReactDOM.render(<App />, document.getElementById("root"));

.bl_book__item {
  display: inline-block;
  width: 150px;
  height: 200px;
  max-resolution: 40px;
  border: 1px solid #000;
}

article {
  padding: 10px;
  border: 1px solid #f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>