Transfer List
Build a component that allows transferring of items between two lists.
Requirements
- There are two lists each initially containing 4 items.
- Each item has a checkbox that can be checked/unchecked.
- Transferring
- Clicking on the double arrow buttons will transfer all items from one list to the other, as specified by the direction of the arrows.
- Clicking on the single arrow buttons will transfer only the selected items, as specified by the direction of the arrows.
- Transferred items are added to the bottom of the destination list.
- Item selection (checked) states are preserved after transferring.
- Buttons are disabled if there are no relevant items to be transferred.
Asked at these companies
Sponsor: SwagOverflowNothing screams React struggle like debugging infinite re-renders. This sleek black tee pays tribute to every front end dev's favorite hook — the one that either saves your app or breaks everything. Perfect for React engineers who live in the dependency array.
Sponsor: SwagOverflowNothing screams React struggle like debugging infinite re-renders. This sleek black tee pays tribute to every front end dev's favorite hook — the one that either saves your app or breaks everything. Perfect for React engineers who live in the dependency array.
Transfer List
Build a component that allows transferring of items between two lists.
Requirements
- There are two lists each initially containing 4 items.
- Each item has a checkbox that can be checked/unchecked.
- Transferring
- Clicking on the double arrow buttons will transfer all items from one list to the other, as specified by the direction of the arrows.
- Clicking on the single arrow buttons will transfer only the selected items, as specified by the direction of the arrows.
- Transferred items are added to the bottom of the destination list.
- Item selection (checked) states are preserved after transferring.
- Buttons are disabled if there are no relevant items to be transferred.
Asked at these companies
Try these questions next
Similar questions
Sponsor: SwagOverflowNothing screams React struggle like debugging infinite re-renders. This sleek black tee pays tribute to every front end dev's favorite hook — the one that either saves your app or breaks everything. Perfect for React engineers who live in the dependency array.
You must be signed in to view your saved versions
Loading editor
Loading editor
Loading editor
JavaScript Console
console.log() statements will appear here.