Functions as Props

Learn how to pass functions as props to handle events in child components.

You can pass functions as props so child components can trigger actions in the parent.

Deleting Items via Props

// Home (parent)
const handleDelete = (id) => {
  const newBlogs = blogs.filter(b => b.id !== id);
  setBlogs(newBlogs);
};

<BlogList blogs={blogs} handleDelete={handleDelete} />

// BlogList (child)
<button onClick={() => handleDelete(blog.id)}>
  Delete
</button>

Why Pass Functions?

State lives in the parent but the delete button is in the child. Passing the function down bridges this gap while maintaining one-way data flow.