Propagate component props

Pass props down to the card component so each instance shows different content. Given an array products with objects having id, title, imgSrc, summary, iterate and call the component for each product, set a data-product-id attribute on the root element, and ensure title text is escaped and not injected as HTML.

Before I ship this props propagation, make reviewer-friendly changes: surface where defaults are applied, document which prop is required (title), and add a validation step that logs a warning when a product lacks imgSrc so reviewers know why a placeholder appears. Keep the API plain JS objects so non-React engineers can reuse it.

I loop products and mount cards, but after updating the products array the UI sometimes shows stale titles for a split second. The PM and the test engineer expect instant consistency. I can't tell if this is a diffing problem, a reuse bug, or event-handler closure holding old data. What is the likely cause and the best immediate change to ensure each mounted card always reflects its current props?

Across feature work we often pass the same object references into components and then mutate them, causing intermittent UI mismatches and confusing bugs. Where is the workflow breaking down and what single habit should the team adopt to reduce these prop-mutation bugs going forward?