Props

Props allow you to pass data from a parent component to a child component.

Passing Props

// Home.js (parent)
<BlogList blogs={blogs} title="All Blogs" />

// BlogList.js (child)
const BlogList = ({ blogs, title }) => {
  return (
    <div>
      <h2>{title}</h2>
      {blogs.map(blog => (
        <div key={blog.id}>
          <h3>{blog.title}</h3>
          <p>{blog.author}</p>
        </div>
      ))}
    </div>
  );
};

Props Are Read-Only

You cannot modify props inside a child component. Data flows one way — from parent to child.