Having a really productive day here, sorry for posting so many questions but I’m in the flow.
Here’s a simple component I’m writing that allows users to update their profile information.
Settings = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
return {
currentUser: Meteor.user()
};
},
openUploadCareDialog: function() {
var self = this;
uploadcare.openDialog().done(function(file) {
file.promise().done(function(fileInfo){
var avatarImage = ReactDOM.findDOMNode(self.refs.avatarImagePreview);
$(avatarImage).attr('src', fileInfo.cdnUrl);
var avatar = ReactDOM.findDOMNode(self.refs.avatarImage);
$(avatar).val(fileInfo.cdnUrl);
});
});
},
validate: function(e) {
Meteor.call('validateUsername', e.target.value, function(err, data) {
if (!data.valid) {
// Username is invalid, show error message.
console.log(data.reason);
}
});
},
updateProfile: function(e) {
e.preventDefault();
if (validate()) {
console.log("Saving changes...");
}
},
render: function() {
return (
<div className="container">
<!-- HTML snipped -->
</div>
);
}
});
So I’ve been thinking about how React works and the tl:dr is you modify the state (underlying data structure) and the UI will reflect that.
However if you look at my openUploadCareDialog()
function, I’m modifying the elements using jQuery. Doesn’t really feel right.
How can I improve this approach and use React’s underlying state mechanism within Meteor. Is it recommended to use both getMeteorData and getInitialState (for data that’s not tied to a meteor object) ?