JSX UI Generation

Transform arrays into lists, tables and galleries.

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

map converts each record into one piece of UI. Its callback must return JSX. A key identifies the record among siblings; use a persistent record ID so sorting or deleting does not confuse component identity. Keep transformation and presentation separate: filter chooses records, sort orders a copy, and map creates elements.

For your student table, a row belongs inside tbody and contains td cells. For galleries, map image records to figures with alt text and captions. For string exercises, apply toLowerCase, slice(0,1), length or reverse to each value. Flatten nested arrays with flat before mapping. Keep the original data unchanged so other parts of the page can still use it.

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

export default function App() {
  const students = [{id: 1, name: 'Ravi', marks: 72}, {id: 2, name: 'Asha', marks: 91}];
  const sorted = [...students].sort((a, b) => a.name.localeCompare(b.name));
  return <table>
    <thead><tr><th>Name</th><th>Marks</th></tr></thead>
    <tbody>{sorted.map(student => <tr key={student.id}>
      <td>{student.name}</td><td>{student.marks}</td>
    </tr>)}</tbody>
  </table>;
}

Apply this to your assignments

Build your strings list, student table and image gallery from the same map pattern. Add sorting first; implement deletion after the useState lesson. Test duplicate names with different IDs and an empty collection.

Your existing examples

• Display each object properties in different elements
• Print array values in list items in JSX
• Print array values in sorted order in list items in JSX
• Print array strings ol and ul
• Print array strings ol of uppercase strings and ul of lowercase
• Print the images from array of image urls
• Print the object properties in JSX
• Print a table for the given array of students

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

Open Assignments for your complete original worksheet. Use the assignment workspace link to submit completed work.

Common mistakes

Using braces in an arrow callback requires return. Do not use a random key or an array index for a reorderable list.

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