Showing restaurents hierarchical list
- Go to folder where you want to clone the repository, open terminal at that folder and run the following command:-
git clone https://github.com/paragdev441/restaurants-hierarchy-list.git - A "restaurants-hierarchy-list" folder is created.
- Done.
Following are components which are used for rendering restaurents hierarchical list and hierarchy of components:-
- Creating Dragabble List of Restaurants & their sub children by using restaurants data from a given API
- Responsible for showing and handling the state of the list's items.
- Used react-beautiful-dnd npm package (https://github.com/atlassian/react-beautiful-dnd) to implement drag and drop functionality.
- State: a). restaurents:- Array of Restaurents
- Responsible for toggling on or off of hierarchical list's items at every level.
- Used TreeView API (https://material-ui.com/api/tree-item/) to show the hierarchy list.
- State: a). expanded:- Array of items that are currently expanded. b) selected:- Array of items that are currently selected.
- Props: a). restaurents:- Array of Restaurents. b) provided:- Provided argument includes information and references to code that the DragDropContext needs to work properly.
- Showing list of restaurant names with each nested item contains the list of menu items.
- Each restaurant (with its children) acts as a draggable element (Consumer).
- Props: a). restaurents:- Array of Restaurents.
- Showing list of menu item's children with each nested child further contains its children and so on.
- Props: a). menu:- Array with a single object containing menu details.
- Showing list of menu's children names and children's children names.
- Recursively call the MenuChildrenList until all children's names are printed.
- Props: a). children:- Array of menu's children which every element(object) further contains children key and so on.