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:

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}

    )
  }

user_5928700 · Answer

To use the value of

 item.id

in your child component what you should do is:

In Parent:

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.

user_1262045 · Answer

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

so you must use this :

this.props.post

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

Use props outside of render

2 Answers