JSX Conditional Styling

Represent data through colors, classes and rating indicators.

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

Conditional styling leaves the record visible and changes its visual treatment. Choose a class for a semantic state such as selected, or choose a style value for a small demonstration. Keep text labels as well as colors so the information remains understandable without color perception.

Your rating example needs five positions and a selected value. A position is filled when it is less than or equal to that value. A read-only rating can be text; an interactive rating must use buttons with accessible names and expose the selected state. The events and state lessons add interaction.

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 rating = 3;
  const n = 7;
  return <main>
    <p style={{color: n % 2 === 0 ? 'green' : 'crimson'}}>{n}: {n % 2 === 0 ? 'Even' : 'Odd'}</p>
    <p aria-label={`${rating} out of 5 stars`}>
      {[1,2,3,4,5].map(star => <span key={star} aria-hidden="true" style={{color: star <= rating ? '#946200' : '#666'}}>{star <= rating ? '★' : '☆'}</span>)}
    </p>
  </main>;
}

Apply this to your assignments

Apply the same condition to backgroundColor, then use your student records to highlight matching table rows. Keep the condition based on an explicit record field. Test ratings 0, 1 and 5.

Your existing examples

• Print 5 stars and fill the starts of given number
• Display each array object in flex boxes with respective gender images
• Display array of objects in table with female students row in pink
• Apply green color if variable value is even red for odd
• Apply green background color if variable value is even red for odd

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

Use comparisons, not assignment (=), in conditions. A rating outside 0–5 should be validated before rendering.

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