title: pass a childs state through react context api to parent component
body: <p>I am trying to pass the state of a child component to the <code>App.js</code> file. 
  For this I wanted to use the new context API.</p>
  
  <p>However I have read this cannot work because the Provider has to be a Parent of the Consumer if the value changes dynamically.</p>
  
  <p>In my case I don't need to change it dynamically, I only want to pass the state to the Consumer. The state of the child component won't change so this is no problem if it doesn't change later.</p>
  
  <p>Is this possible to pass the state from <code>BlogPost.js</code> to <code>App.js</code>? If there is an alternative to using the context API this would also be fine.</p>
  
  <p>My Code:</p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>import BlogPost from './containers/BlogPost/BlogPost';
  
  import { MediaContext } from './containers/BlogPost/BlogPost.js'
  
  class App extends Component {
  
    render() {
  
  
        return (
            &lt;div&gt;
                &lt;BlogPost /&gt;
                &lt;MediaContext.Consumer&gt;
                  {value =&gt; 
                console.log(value)}
            &lt;/MediaContext.Consumer&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App
  </code></pre>
  
  <p><strong>BlogPost.js:</strong> 
  The State of this component should be passed. If I define the Context in <code>React.createContext('hello')</code> it works. But I can't define state there.</p>
  
  <pre><code>export const MediaContext = React.createContext();
  
  class BlogPost extends Component {
      state = {
          title: "title",
          image: {
              src: "link",
              alt: "alt,
              credits: "Unsplash",
          },
          text: "Text Text Text",
          media: {
              type: 'music',
              audiosrc: 'audiosrc',
              coversrc: 'coversrc',
              artist: 'artist',
              title: 'Songtitle',
              started: false
          },
      }
  
      render() {
          return (
              &lt;article&gt;
                  &lt;MediaContext.Provider value={this.state}&gt;
                  &lt;/MediaContext.Provider&gt;
              &lt;/article&gt;
          );
      }
  }
  
  
  export default BlogPost;
  </code></pre>