Component Hierarchy

Jump to bottom

CelesteComet edited this page Jan 29, 2018 · 4 revisions

React Component Hierarchy

Functional Component Hierarchy

Root
- App
  - Aside
  - Header
  - Main
  - Footer

Aside

Aside
- Components:
  - Search Input
    - State: local
  - AsideButtons
  - FriendsList
    - FriendsListItem

Header

Header
- Components:
  - HeaderButtons
  - Receiver
    - props: users[:username], users[:status]

Main

MessagesIndexContainer + MessagesIndex
- State: messages, users
- Components:
  - MessageIndexItem
    - State: messages[:id], ui
MessagesFormContainer + MessagesForm
- State: local

Footer

Static UI Element

Session

SessionFormContainer + SessionForm
- Route: /#/login and /#/signup
- State: errors.login