react-context-provide.js

import React, { Component } from 'react';
import Header from './Header.component';
import Body from './Body.component';
import ThemeContext from './context/ThemeContext';
import {themeConfig} from './context/ThemeContext';

class App extends Component {

  constructor() {
    super();
    this.state = {
      theme: 'light'
    }
    this.toggleTheme = this.toggleTheme.bind(this);
  }

  toggleTheme(newTheme) {
    this.setState({
      theme: newTheme
    });
  }

  render() {
    return (
      <ThemeContext.Provider value={themeConfig[this.state.theme]}}>
        <Header toggleTheme={this.toggleTheme}/>
        <Body/>
      </ThemeContext.Provider>
    );
  }
}

export default App;