pass a childs state through react context api to parent component

Question

I am trying to pass the state of a child component to the App.js file. For this I wanted to use the new context API.

However I have read this cannot work because the Provider has to be a Parent of the Consumer if the value changes dynamically.

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.

Is this possible to pass the state from BlogPost.js to App.js? If there is an alternative to using the context API this would also be fine.

My Code:

App.js:

import BlogPost from './containers/BlogPost/BlogPost';

import { MediaContext } from './containers/BlogPost/BlogPost.js'

class App extends Component {

  render() {


      return (
          <div>
              <BlogPost />
              <MediaContext.Consumer>
                {value => 
              console.log(value)}
          </MediaContext.Consumer>
      </div>
    );
  }
}

export default App

BlogPost.js: The State of this component should be passed. If I define the Context in React.createContext('hello') it works. But I can't define state there.

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 (
            <article>
                <MediaContext.Provider value={this.state}>
                </MediaContext.Provider>
            </article>
        );
    }
}


export default BlogPost;

Answer 1

React context api is designed to pass data from parent to child. So you will have to use a custom prop. In your App.js, call BlogPost with a prop and calling it will trigger the handleData function.

import BlogPost from './containers/BlogPost/BlogPost';

class App extends Component {

handleData = (value) => {
  console.log(value)
 }

render() {


  return (
      <div>
          <BlogPost customProp={this.handleData}/>
    </div>
   );
  }
 }
export default App

Then in you blogpost.js, call the customProp function whenever you want to pass the data. If you want to pass data immediately after the component has mounted, call it in the componentDidMount lifecycle or any other lifecycle method depending on when you want to pass data.

class BlogPost extends Component {
 constructor(props) {
 super(props);
 this.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
           }
   }
  }

componentDidMount(){
this.props.customProp(this.state);
}

render() {
    return (
        <article/>
    );
}
}


 export default BlogPost;