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("ments").where("post", "==", this.props.post).onSnapshot((querySnapshot) => {
     // Rest of code

  }
  render() {
    return (

      // This works:

      {this.props.post}

    )
  }

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("ments").where("post", "==", this.props.post).onSnapshot((querySnapshot) => {
     // Rest of code

  }
  render() {
    return (

      // This works:

      {this.props.post}

    )
  }

• javascript
• reactjs
• react-native

• Are you super(ing) props? – Saddy Commented Sep 15, 2018 at 16:17
• Are you passing an id prop? – Colin Ricardo Commented Sep 15, 2018 at 16:19
• Am I missing something? You don't have a prop named id. You have a prop named post. this.props.id or this.props.item.id is undefined. You have this.props.post here. – devserkan Commented Sep 15, 2018 at 16:20

2 Answers 2

To use the value of

 item.id

in your child ponent 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("ments").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 ponent in render method and then pass the props to the function declared outside the render method.

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

<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}/>