Compose record components inside collection components.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

Separate a ProductRow from ProductsTable: the row knows how one product looks; the table knows how to arrange a collection. Data flows through props. Keep keys at the point where map creates siblings, not only on an element hidden inside a child.

For your select-box example, each option has a stable value such as a product ID and human-readable text. For image arrays, use a Gallery component and provide alternative text. Keep object identifiers independent of list position, especially when you later sort or delete records.

Data / props ↓ JavaScript expression ↓ JSX elements ↓ Visible UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

function ProductRow({product}) {
  return <tr><td>{product.name}</td><td>₹{product.price}</td></tr>;
}
function ProductsTable({products}) {
  return <table><thead><tr><th>Product</th><th>Price</th></tr></thead>
    <tbody>{products.map(product => <ProductRow key={product.id} product={product} />)}</tbody>
  </table>;
}
export default function App() {
  return <ProductsTable products={[{id: 'p1', name: 'Notebook', price: 80}, {id: 'p2', name: 'Pen', price: 20}]} />;
}

Apply this to your assignments

Build your product table and image gallery as reusable components. Add an empty-state row with colSpan matching the column count. Create a second table with different data.

Your existing examples

• Array rendering in component
• Tablegeneration
• Print array strings ol and ul in React component
• Print array values in React component
• Print only the even numbers of array of numbers in list items in React component
• Print array strings in list items in React component
• Print a table for the given array of students in React component
• Print each object in a seperate list for a given array of student objects in React component.
• Generate list of strings for the given array of strings in React component
• Selectbox
• Display different elements conditionally React component
• Conditionally apply url to image in React component

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet and submission controls.

Common mistakes

An object prop is read through fields; do not render {product}. Keep tr inside a valid table section.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements