How should I be structuring my data flow in my React + React Router + PouchDB app?

I'm currently building a course scheduling app called Serif, which loads course data into PouchDB on first load. The UI is as such:

The "Current Term" is a dropdown list and controls the current data set being used at any given time. For example, if "2016 Fall" is selected, then the user can search, browse, select courses, and create calendars using courses from the 2016 Fall catalog. When a user switches to "2016 Spring", they would now be using the 2016 Spring data set, and so on.

I'm using PouchDB to keep everything clientside (at least for now). With that said, here's my current component structure (roughly, without components that are only for layout):

• Serif (one of my Router routes)
  • Subnav
    • TermSelect (this is the one you see on the top right: "Current Term")
  • Search
  • Browse
  • Calendars
    • calendar selection stuff
    • the actual calendar

My question focuses on the data flow from PouchDB to the TermSelect component (but the correct answer to this will inform my structuring of all other components).

The way I've built it now, Serif has a state called currentTerm that keeps track of the current term for the app. In the constructor, PouchDB is queried for the first term and sets currentTerm to that value.

In the render method of Serif, the PouchDB is queried for the list of terms in the db and that list is formatted to the expected format and then passed as a prop to the Subnav component which in turn passes it to the TermSelect component.

The TermSelect component uses the received props to populate the dropdown list and sets its default display value to the first in the list, hence resulting in "2016 Fall" you see above. When an option is selected, a callback function passed down as part of the data is called, which changed the state of the Serif component.

Aside from a problem of the default value required a click to display, this mostly works. Is this the correct way to do things? Instead of passing the terms data down from Serif to the TermSelect component, the TermSelect component could query it directly from the PouchDB.

Any suggestions for improvement, or even just a confirmation that this is the correct data flow pattern would be appreciated. I'm new to React and I'm having trouble juggling all the correct patterns and antipatterns (don't use prop to set state, components should pass data from stateful to stateless, etc).

Thanks!