I want to pass data to the App root data function in my f7params object

I have fetched data from the OpenWeatherAPI and did setState to set or store the data i receive from the API in my weather object in the code everything is okay what am trying to do is get the data in the weather object in my state and pass it to my f7params data app root function in my dataFromApi and then render it in another component but i have no idea on how i can do that please help

this.state = {
      // Framework7 Parameters
      f7params: {
        id: 'io.emmanuelhaankwenda.weatherapp', // App bundle ID
        name: 'Weather App', // App name
        theme: 'auto', // Automatic theme detection
        // App root data
        data: function () {
          return {
            dataFromApi: "Weather Data",

        // App routes
        routes: routes,

        // Input settings
        input: {
          scrollIntoViewOnFocus: !!this.$device.cordova,
          scrollIntoViewCentered: !!this.$device.cordova,
        // Cordova Statusbar settings
        statusbar: {
          overlay: this.$device.cordova && this.$device.ios || 'auto',
          iosOverlaysWebView: true,
          androidOverlaysWebView: false,
      hello: "Emmanuel",
      isLoading: true,
      weather: {},
      error: null
    this.fetchWeather = this.fetchWeather.bind(this)
    this.drawWeather = this.drawWeather.bind(this)

You shouldn’t pass it to f7’s data, it is not reactive. Your question is generic React understanding on how to exchanged data and state in React in general.

In your case, i would better request the data directly in page component where you use it, instead of in main app component, and you won’t have such issue


Thanks alot it works perfectly