Deviopath › React

Transfer List

Hard · Lists

Build a transfer list: two lists with buttons that move checked items between them.

Render <ul className="left"> and <ul className="right">. Each item is an <li> containing a <label> with an <input type="checkbox"> and the item name. The left list starts with ITEMS, the right list starts empty.

Add four buttons:

- <button className="to-right"> with the text >: moves the checked items of the left list to the right list

- <button className="to-left"> with the text <: moves the checked items of the right list to the left list

- <button className="all-right"> with the text >>: moves every left item to the right

- <button className="all-left"> with the text <<: moves every right item to the left

Moved items are added to the end of the other list (keeping their order) and become unchecked. The > and < buttons are disabled when no item is checked in their source list.

Next: Kanban Board