Bob Lorriman Bob Lorriman - 3 months ago 29
React JSX Question

Meteor-react passing variable to child container

I’m working on an app where users can make comments, and others can reply to their comment (reply).

My problem is that when I pass the commentId to the ReplyDetail component (the child) I’m unable to access the commentId as a prop in the createContainer - I can only access it in the component. I am looping (map) through the comments.

This is how I am passing the variable from commentContent.jsx (inside the map function)



<div className="section">
<ReplyDetail commentId={comment._id}
</div>





And this is the child component replyDetail.jsx



import { Meteor } from 'meteor/meteor';
import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

import { Comments } from '../../../imports/collections/groupMethods';

class ReplyDetail extends Component {

render() {

//this works
const commentId = this.props.commentId;
console.log('this.props.commentId ' + this.props.commentId);

return(
<div>{commentId}</div>
)
}
}

export default createContainer((props) => {
Meteor.subscribe('comments');

//this doesn't work
const commentId = this.props.commentId;
console.log('this.props.commentId-2 ' + this.props.commentId);
return {
};
}, ReplyDetail)





And this is the error I get.


Warning: There is an internal error in the React performance
measurement code. Did not expect componentDidMount timer to start
while componentWillMount timer is still in progress for another
instance.


I need the replies to be reactive, so how do I either pass the commentId (props) directly to the container - or how can I pass the commentId from the component to the container?

Answer

Yep, It doesn't work because your createContainer function already receives the props in the argument (props) so you don't need this. This should fix:

import { Meteor } from 'meteor/meteor';
import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Comments } from '../../../imports/collections/groupMethods';

class ReplyDetail extends Component {

render() {
    const {commentId} = this.props;
    console.log('commentId', commentId);
    return (
        <div>{commentId}</div>
    )
  }
}

export default createContainer((props) => {
    Meteor.subscribe('comments');
    const commentId = props.commentId;
    console.log('commentIdFromContainer', commentId);
  return { 

  };
}, ReplyDetail)