Use props outside of render

Question

I am trying to access my prop "post" from my parent. I can access it inside render(), but not above where I have my getCom(). How can I make the prop available in functions and not only in the render? I tried to use this.item.id.bind(this) , but that does not work.

Parent:

<LoadComments post={item.id}/>

Child

class LoadComments extends Component {
  getCom = async () => {

    // Thid does not work

    this.unsubscribe = await firestore.collection("comments").where("post", "==", this.props.post).onSnapshot((querySnapshot) => {
     // Rest of code

  }
  render() {
    return (

      // This works:

      {this.props.post}

    )
  }

Answer 1

As you see you pass id as post to your child component :

<LoadComments post={item.id}/>

so you must use this :

this.props.post

if you want to use id you must pas it as id like this :

<LoadComments id={item.id}/>

Answer 2

To use the value of

 item.id

in your child component what you should do is:

In Parent:

<LoadComments post={item.id}>

In Child Component:

class LoadComments extends Component {

   async getCom(props) => {

   // This would work now

  this.unsubscribe = await firestore.collection("comments").where("post", "==", 
  props.post).onSnapshot((querySnapshot) => {
   // Rest of code

   }
  render() {
    const props = this.props;
      return (

        {this.props.post}

        getCom(props)

 )
}

You have to store the props in a static component in render method and then pass the props to the function declared outside the render method.