Separate selecting records from selecting their appearance.

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

filter decides whether a record appears. A ternary inside map decides how a record that remains will be displayed. Your odd/even and greater-than-25 assignments use predicates; your bold/italic assignment keeps every number and changes its markup.

For student details, select actual record fields and an explicitly provided image URL. Do not infer a student’s identity from a name. When a filter finds no records, render an empty-state message. Name and ID can appear together in a card, with a button wired to an event handler in the events lesson.

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 values = [12, 25, 31, 40];
  const visible = values.filter(n => n > 25);
  return <main>
    <h1>Above 25</h1>
    {visible.length === 0 ? <p>No matches</p> : <ul>
      {visible.map(n => <li key={n}>{n % 2 === 0 ? <i>{n}</i> : <b>{n}</b>}</li>)}
    </ul>}
  </main>;
}

Apply this to your assignments

Change the predicate to odd-only, even-only, and below 25. Render uppercase student names and IDs. For repeated numbers, give each record an ID instead of using its value as a key.

Your existing examples

• Print only the even numbers of array of numbers in list items
• Print even numbers in italics and odd numbers in bold in list
• Print only the numbers of array less than 25 of numbers in list items
• Print a student details alogn with gender image

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

Do not return booleans from map when you intended to display a number. Check threshold equality explicitly.

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