React

Rendering Data Arrays

array-mapping-challenge-output.png

const BOOKS = [
  {
    title: "The Catcher in the Rye",
    author: "J.D. Salinger",
  },
  {
    title: "To Kill a Mockingbird",
    author: "Harper Lee",
  },
  {
    title: "1984",
    author: "George Orwell",
  },
  {
    title: "Pride and Prejudice",
    author: "Jane Austen",
  },
  {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
  },
];

const Books = () => (
  null // Remove this null and implement mapping logic here.
);

const Book = ({ title, author }) => (
  <div style={{ borderBottom: "1px solid black" }}>
    <p>Book title: {title}</p>
    <p>Author: {author}</p>
  </div>
);

export default Books;

const BOOKS = [
  {
    title: "The Catcher in the Rye",
    author: "J.D. Salinger",
  },
  {
    title: "To Kill a Mockingbird",
    author: "Harper Lee",
  },
  {
    title: "1984",
    author: "George Orwell",
  },
  {
    title: "Pride and Prejudice",
    author: "Jane Austen",
  },
  {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
  },
];

const Books = () => (
  BOOKS.map(book => <Book {...book}  />)
);

const Book = ({ title, author }) => (
  <div style={{ borderBottom: "1px solid black" }}>
    <p>Book title: {title}</p>
    <p>Author: {author}</p>
  </div>
);

export default Books;