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

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.

PreviousBefore the breakNextSide-effects and context

Last updated 5 years ago

Was this helpful?