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}
)
}
Share
Improve this question
edited Sep 15, 2018 at 16:29
vemund
asked Sep 15, 2018 at 16:13
vemundvemund
1,8174 gold badges31 silver badges44 bronze badges
3
- 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 namedpost
.this.props.id
orthis.props.item.id
isundefined
. You havethis.props.post
here. – devserkan Commented Sep 15, 2018 at 16:20
2 Answers
Reset to default 4To 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}/>