devmeetings-react-ts-fork
  • Devmeeting React + Typescript
  • Speed dating
  • Typescript
    • It's just JavaScript
    • Basic types
    • Typing objects
    • Typing functions
    • Modules
    • Generics
    • Tasks
  • Hello React
    • Quick look around
    • The first component
    • JSX
    • Tasks
  • Components & Props
    • Small components
    • Passing data to a component
    • Loops in JSX
    • Tasks
  • Stateful components
    • Handling events
    • Components with internal state
    • Talking to a parent component
    • Smart and dumb components
    • Before the break
    • Tasks
  • Side-effects and context
    • Side-effects
    • Prop drilling
    • Using context
    • Tasks
  • What's next
    • Styling
    • Learning component's lifecycle
    • State Management
Powered by GitBook
On this page
  • 1. Show/hide contact details on hover
  • 2. Add ability to filter contacts by name
  • 3. Add button that keeps the contact expanded
  • 4. Filter by all fields, not just name
  • 5. Make filtering case insensitive
  • 6. Add button that sorts contacts by name; clicking the button should toggle sort direction
  • 7. Add an icon the the button (↑/↓) to indicate sorting direction.

Was this helpful?

  1. Stateful components

Tasks

PreviousBefore the breakNextSide-effects and context

Last updated 5 years ago

Was this helpful?

1. Show/hide contact details on hover

Hint using state and a callback, not CSS.

2. Add ability to filter contacts by name

3. Add button that keeps the contact expanded

4. Filter by all fields, not just name

5. Make filtering case insensitive

6. Add button that sorts contacts by name; clicking the button should toggle sort direction

7. Add an icon the the button (↑/↓) to indicate sorting direction.

⭐
⭐
⭐
⭐
🔥
🔥