Enjoy 20% off all plans by following our social accounts!
Check it out
Interviews
Get started
Prepare
Preços
Sign in / up
Get full access
Transfer List
Framework
React
Angular
Vue
Svelte
Autor
Yangshun Tay
Ex-Meta Staff Engineer
Languages
Dificuldade
Médio
Recommended duration to spend during interviews
30 minutos
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.
Preview what you need to build
View solution
Click to go back
Click to go forward
Refresh preview
Mark complete
Save to cloud
Description
Solution
Saved code
Transfer List
Framework
React
Angular
Vue
Svelte
Autor
Yangshun Tay
Ex-Meta Staff Engineer
Languages
Dificuldade
Médio
Recommended duration to spend during interviews
30 minutos
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.
Preview what you need to build
Experimente estas perguntas a seguir
Transfer List II
Dificuldade
Difícil
Perguntas similares
Todo List
Dificuldade
Médio
Solution
View the full solution on a new page
Go to solution
You must be signed in to view your saved versions
File explorer
App.js
styles.css
public
index.html
src
App.js
index.js
styles.css
package.json
For now, files cannot be created or renamed. It's acceptable to write multiple components within a single file during interviews.
Tema
Active4D
All Hallows Eve
Amy
Birds of Paradise
Blackboard
Brilliance Black
Brilliance Dull
Chrome DevTools
Clouds Midnight
Clouds
Cobalt
Cobalt2
Dawn
Dracula
Dreamweaver
Eiffel
Espresso Libre
GitHub Dark
GitHub Light
GitHub
IDLE
Katzenmilch
Kuroir Theme
LAZY
MagicWB (Amiga)
Merbivore Soft
Merbivore
Monokai Bright
Monokai
Night Owl
Nord
Oceanic Next
Pastels on Dark
Slush and Poppies
Solarized-dark
Solarized-light
SpaceCadet
Sunburst
Textmate (Mac Classic)
Tomorrow-Night-Blue
Tomorrow-Night-Bright
Tomorrow-Night-Eighties
Tomorrow-Night
Tomorrow
Twilight
Upstream Sunburst
Vibrant Ink
Xcode_default
Zenburnesque
iPlastic
idleFingers
krTheme
monoindustrial
Loading editor
Tema
Active4D
All Hallows Eve
Amy
Birds of Paradise
Blackboard
Brilliance Black
Brilliance Dull
Chrome DevTools
Clouds Midnight
Clouds
Cobalt
Cobalt2
Dawn
Dracula
Dreamweaver
Eiffel
Espresso Libre
GitHub Dark
GitHub Light
GitHub
IDLE
Katzenmilch
Kuroir Theme
LAZY
MagicWB (Amiga)
Merbivore Soft
Merbivore
Monokai Bright
Monokai
Night Owl
Nord
Oceanic Next
Pastels on Dark
Slush and Poppies
Solarized-dark
Solarized-light
SpaceCadet
Sunburst
Textmate (Mac Classic)
Tomorrow-Night-Blue
Tomorrow-Night-Bright
Tomorrow-Night-Eighties
Tomorrow-Night
Tomorrow
Twilight
Upstream Sunburst
Vibrant Ink
Xcode_default
Zenburnesque
iPlastic
idleFingers
krTheme
monoindustrial
Loading editor
Browser
Console
Click to go back
Click to go forward
Refresh preview
Filter logs
Filtrar por nível de log
Todos os níveis de log
Informações
Alertas
Erros
JavaScript Console
As declarações
console.log()
aparecerão aqui.
Mark complete
Save to cloud