<file_sep>import React from 'react';
export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
  name:"ravi"
};

export const toggleTheme= () => {
  themes.light = {
    foreground: '#eeeeee',
    background: 'red',
  };
};

export const ThemeContext = React.createContext(
  themes.light, // default value
  toggleTheme, 
  themes.name
);<file_sep>import React, { Component } from 'react';

import SampleForm from './form';

import { FreeContext, helpers } from './freeContext';

class MainComponent extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = () => {
       this.setState(state => ({
        labelName: "loading",
      }));
      setTimeout(() =>{
          this.setState(state => ({
            labelName: "done",
          }));
       }, 3000);
    }
    this.state = {
      labelName: helpers.labelName,
      handleSubmit: this.handleSubmit,
      data1:[],
    };
  }
  componentDidMount() {
   fetch('https://www.reddit.com/r/reactjs.json')
    .then((result) => {
      // Get the result
      // If we want text, call result.text()
      return result.json();
    }).then((jsonResult) => {
      this.setState({
        data1: jsonResult
      })
    })
  }
  render() {
    return (
      <div>
         <FreeContext.Provider value={this.state}>
          <SampleForm />
         </FreeContext.Provider>
      </div>
    );
  }
}

export default MainComponent;<file_sep>import React from 'react';

export const helpers = {
  labelName:"Submit"
};

export const FreeContext = React.createContext(helpers.labelName);<file_sep>import React, { Component } from 'react';
import Button from './button';
class SubForm extends Component {
    constructor(props) {
      super(props);    
      this.state = {
        fName:"", 
        lName:""
      };
      this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e){
      this.setState({
        [e.target.name] : [e.target.value]
      })
    }
    render() {
    // The entire state is passed to the provider
    
    return (
      <div>
        <input type="text" value={this.state.fName} name="fName" onChange={this.handleChange.bind(this)}/>
        <input type="text" value={this.state.lName} name="lName" onChange={this.handleChange.bind(this)}/>
        <Button />
      </div>
    );
  }
}

export default SubForm;<file_sep># ContextApi
Sample context API
