React

Rendering Data Arrays

array-filtering-challenge-output.png

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

const Books = () => (
  null // Remove this null and implement your 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: "Pride and Prejudice", author: "Jane Austen" },
  { title: "1984", author: "George Orwell" },
  { title: "Mansfield Park", author: "Jane Austen" },
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald" },
];

const Books = () =>
  BOOKS.filter(({ author }) => author === "Jane Austen").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;
