I am trying to pull Meteor data in to pre-populate an input field and then saving the new user input when the user submits via a button.
I have tried many ways of doing this, but just cannot get it right. I guess my main problem is that I do not have a firm grasp on how the getMeteorData() React method works. When does this.data get populated in the React component lifecycle and how can I put that data in the state of the component? (and is this even a good thing to do?)
Here is my code with my latest attempt at it. I’ve tried setting the state equal to this.data in componentWillMount() and componentDidMount() with no luck (I get an error that this.data is undefined). So it appears getMeteorData() takes place after those? Or they just don’t have access to this.data?
TopicPageEditor = React.createClass({
mixins: [ReactMeteorData],
getMeteorData () {
var id = this.props.params.topicId;
var handle = Meteor.subscribe('singleTopic', id);
var user = Meteor.user();
if (!user.profile.admin == 'full') {
alert('You are not authorized to edit this topic.');
FlowRouter.go("/t/" + id);
};
return {
topic: Topics.findOne(id),
elements: Elements.find({associatedTopics: { $elemMatch: {topicId: id}}}).fetch(),
}
},
getInitialState () {
return {
title: this.data.topic.title
}
},
_handleTopicTitleChange (e) {
this.setState({ title: e.target.value })
},
_handleTopicUpdate (e) {
e.preventDefault();
var topic = {
_id: this.data.topic._id,
title: this.state.title,
path: this.data.topic.path,
bgImageUrl: this.data.topic.bgImageUrl,
textbook: this.data.topic.textbook
};
topicId = Meteor.call('topicUpsert', topic, function(error, result) {
if (error) {
return throwError(error.reason);
}
});
},
shouldComponentUpdate() {
return true;
},
render () {
var elements = this.data.elements.map((element) => {
return <Element key={element._id} type={element.type} content={element.content} />
});
var updateTopicButton = (
<div className="edit-topic-link">
<a className="btn green brandon" onClick={this._handleTopicUpdate}>Update Topic</a>
</div>
)
if (this.data.topic) {
var backgroundImage = { backgroundImage: 'url(' + this.data.topic.bgImageUrl + ')' };
return (
<div className="container topic">
<form className="topic-wysiwyg" id="edit-topic-form">
<div className="row full preview">
<div className="bg-image bg-ht-70 bg-preview" style={backgroundImage}>
<Nav />
<div className="row default center v-center">
<textarea name="title" id="title" type="textx" className="title" value={this.state.title} onChange={this._handleTopicTitleChange}></textarea>
</div>
{updateTopicButton}
</div>
</div>
<div className="row narrow">
<div>{elements}</div>
</div>
</form>
</div>
);
} else {
return (<h1>Waiting</h1>);
}
}
});
Any help is greatly appreciated, thank you!