I have a list of messages inside a user document in the profile object, which are found at user.profile.siteMessages.
I am simply wanting to render the messages to my <ul>. I noticed that according to the docs, you use the following to wrap your component with a container:
Messages.propTypes = {
currentUser: PropTypes.object,
};
export default createContainer(() => {
return {
currentUser: Meteor.user(),
};
}, Messages);
The values are then suppose to be accessed via this.props:
class Messages extends React.Component {
constructor(props) {
super(props);
this.state = {
messages: [],
}
}
renderMessages() {
console.log(Meteor.user())
if (!this.props.currentUser) {
return ""
} else {
let msgs = this.props.currentUser.profile.siteMessages.map((obj) => {
return (
<li key={obj.createdAt.toString()}>
<div>{obj.text} </div>
</li>
);
})
return msgs;
}
}
check() {
console.log(Meteor.user())
}
render() {
return (
<div className="messages">
<ul className="messages-list">
{this.renderMessages()}
<button onClick={this.check}></button>
</ul>
</div>
);
}
}
I have a few questions:
-
Why is the value put into props instead of the components state?
-
renderMessagesseems to be called twice. The first time, the log statement at the start of the function prints undefined, presumably becauseMeteor.user()has not loaded. The second time it prints the object. Why is the function being run twice? Im assuming its because the previously mentioned prop is given a new value once the container loads it, but how does that cause the function to rerun?