Outputting Lists

Use the map() method to render lists of data in React.

Mapping Over Data

const Home = () => {
  const [blogs, setBlogs] = useState([
    { id: 1, title: "My First Blog", author: "Mario" },
    { id: 2, title: "React Tips", author: "Yoshi" },
    { id: 3, title: "Web Dev News", author: "Mario" }
  ]);

  return (
    <div>
      {blogs.map(blog => (
        <div className="blog-preview" key={blog.id}>
          <h2>{blog.title}</h2>
          <p>Written by {blog.author}</p>
        </div>
      ))}
    </div>
  );
};

The key Prop

Every list item needs a unique key prop so React can efficiently track changes.