CODEWITHSUNDEEP
javascriptarraysreactjsjavascript-objectsmap-function
Aashiq Otp
Aashiq Otp

Reputation: 85

Calling A Child Component Inside a Map Function In ReactJs

i have an state of array time and have data in it.what i want to do is map through this state and call a child components with props

My State

 this.state = { 
  user:'',
 feedArray:[],

 }

Function To Set Data 

  //I CALLED THIS IN COMPONENTDIDMOUNT
  renderFeed(){
  rdb.ref("feeds").once('value',(snapshot)=>{
  snapshot.forEach((childSnapshot)=>{
    this.setState({feedArray:Object.values(childSnapshot.val())})

})
 }).then(()=>{
console.log(this.state.feedArray);
})

}

return part

 render() { 

    if (this.state.feedArray) {
      this.state.feedArray.map((feed,id)=>{
        console.log(feed.body);   //this works fine
        return (<FeedElement id={feed.id} body={feed.body}/> );  //This Not Works

      })

    }
     }

This Is The log Cosoled on console.log(this.state.feedArray)

(4) […]
​
0: Object { author: "AashiqOtp", body: "kkk", feedid: "-M1_6POMRyqRv2tIKrF9", … }
​
1: Object { author: "AashiqOtp", body: "kkk", feedid: "-M1_6XYaUAlsXlwnAbcp", … }
​
2: Object { author: "AashiqOtp", body: "f", feedid: "-M1_HB07eh_08OFFRBbO", … }
​
3: Object { author: "AashiqOtp", body: "we have a new rm", feedid: "-M1d4xwLmSUKA0RZlH-Q", … }

Any Ideas? Thanks In Advance

Upvotes: 1

Views: 1113

Answers (2)

visizky
visizky

Reputation: 761

this.state.feedArray.map((feed,id)=>{
        console.log(feed.body); 
        return (<FeedElement id={id} body={feed.body}/> );  Works
      })

feed.id is equivalent to feed[id] and if id is not present inside the array of objects then accessing it throws undefined, however from the console.log you provided the feed has feed.feedid, you can either pass id={feed.feedid} or id={id}

Upvotes: 1

Mohit Prakash
Mohit Prakash

Reputation: 512

can you pass feed.feedid instead of feed.id and return before the the map function.

render() { 

if (this.state.feedArray) {
  return this.state.feedArray.map((feed,id)=>
    (<FeedElement id={feed.id} body={feed.body}/> );  //This Not Works
   )

}else {
    return null;
}
 }

Hopefully it should work

Upvotes: 7

Related Questions