title: React Context api - Consumer Does Not re-render after context changed
body: <p>I searched for an answer but could not find any, so I am asking here,
  I have a consumer that updates the context, 
  and another consumer that should display the context.
  I am using react with typescript(16.3)</p>
  
  <p>The Context(AppContext.tsx):</p>
  
  <pre><code>export interface AppContext {
      jsonTransactions: WithdrawTransactionsElement | null;
      setJsonTran(jsonTransactions: WithdrawTransactionsElement | null): void;
  }
  
  export const appContextInitialState : AppContext = {
      jsonTransactions: null,
      setJsonTran : (data: WithdrawTransactionsElement) =&gt; {
          return appContextInitialState.jsonTransactions = data;
      }
  };
  
  export const AppContext = React.createContext(appContextInitialState);
  </code></pre>
  
  <p>The Producer(App.tsx):</p>
  
  <pre><code>interface Props {}
  
  class App extends React.Component&lt;Props, AppContext&gt; {
  
    state: AppContext = appContextInitialState;
  
    constructor(props : Props) {
      super(props);
    }
  
    render() {
      return (
          &lt;AppContext.Provider value={this.state}&gt;
            &lt;div className="App"&gt;
              &lt;header className="App-header"&gt;
                &lt;SubmitTransactionFile/&gt;
                &lt;WithdrawTransactionsTable /&gt;
              &lt;/header&gt;
            &lt;/div&gt;
          &lt;/AppContext.Provider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The updating context consumer(SubmitTransactionFile.tsx)</p>
  
  <pre><code>class SubmitTransactionFile extends React.Component {
  
      private fileLoadedEvent(file: React.ChangeEvent&lt;HTMLInputElement&gt;, context: AppContext): void{
          let files = file.target.files;
          let reader = new FileReader();
          if (files &amp;&amp; files[0]) {
              reader.readAsText(files[0]);
              reader.onload = (json) =&gt;  {
                  if (json &amp;&amp; json.target) {
                      // @ts-ignore -&gt; this is because result field is not recognized by typescript compiler
                      context.setJsonTran(JSON.parse(json.target.result))
                  }
              }
          }
      }
  
      render() {
          return (
              &lt;AppContext.Consumer&gt;
                  { context  =&gt;
                      &lt;div className="SubmitTransactionFile"&gt;
                          &lt;label&gt;Select Transaction File&lt;/label&gt;&lt;br /&gt;
                          &lt;input type="file" id="file" onChange={(file) =&gt;
                              this.fileLoadedEvent(file, context)} /&gt;
                          &lt;p&gt;{context.jsonTransactions}&lt;/p&gt;
                      &lt;/div&gt;
                  }
              &lt;/AppContext.Consumer&gt;
          )
      }
  }
  
  
  export default SubmitTransactionFile;
  </code></pre>
  
  <p>and finaly the display consumer(WithdrawTransactionsTable.tsx):</p>
  
  <pre><code>class WithdrawTransactionsTable extends React.Component {
  
      render() {
          return (
              &lt;AppContext.Consumer&gt;
                  { context  =&gt;
                      &lt;div&gt;
                          &lt;label&gt;{context.jsonTransactions}&lt;/label&gt;
                      &lt;/div&gt;
                  }
              &lt;/AppContext.Consumer&gt;
          )
      }
  }
  
  export default WithdrawTransactionsTable;
  </code></pre>
  
  <p>It is my understanding that after <code>fileLoadedEvent</code> function  is called the <code>context.setJsonTran</code> should re-render the other consumers and <code>WithdrawTransactionsTable</code> component should be re-rendered , but it does not.</p>
  
  <p>what am I doing wrong?</p>