CODEWITHSUNDEEP
meteorreactjs
ChrisWilson
ChrisWilson

Reputation: 459

Using ReactiveVars in Meteor/React

When I click the button that triggers {this.subscribe}, I want to change the HTML on that button to 'UnSubscribe', and when clicked again change back to 'Subscribe'. Any help much appreciated here. I got this to work with AutoVars but having trouble using ReactiveVar. Any help much appreciated. 

 Header = React.createClass({
  mixins: [ReactMeteorData],

  getInitialState: function(){
    Meteor.subscribe('directory');
    var subscribeText = new ReactiveVar('UnSubscribe');
    return {
      subscribeText: subscribeText
    };
  },

  getMeteorData: function() {
    var subscribeBoolean = false;
    var subscribeText = this.state.subscribeText.get();
    return {
      subscribeBoolean: subscribeBoolean,
      subscribeText: subscribeText
    };
  },


  subscribe: function(){
    //Meteor.users.update({_id: Meteor.user()._id}, {$set:{"profile.name": "Carlos"}});
    if (this.data.subscribeBoolean === true) {
      this.data.subscribeBoolean = false;
      this.data.subscribeText = "Subscribe";
    }
    else {
      this.data.subscribeBoolean = true;
      this.data.subscribeText = "UnSubscribe";
    }
return {
};
  },
  render: function() {
    //Move this into getMeteorData so that the HTML is grabbing straight
//from the getMeteorData
return (
 <nav className="navbar navbar-default">
    <div className="container-fluid">
      <div className="navbar-header">
        <a className="navbar-brand" href="#">Reddit Clone</a>
      </div>

  <ul className="nav navbar-nav">
    <li className="active"><a href="#">Link <span className="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <ul className="nav navbar-nav navbar-right">
    <li>
      <button onClick={this.subscribe}>
        {this.data.subscribeText}
      </button>
    </li>
    <li> <AccountsUIWrapper align="right" /> </li>
  </ul>

Upvotes: 0

Views: 100

Answers (1)

Soubhik Mondal
Soubhik Mondal

Reputation: 2666

You need to use the set method to set data on the ReactiveVar.

So, for example,

this.data.subscribeText = "Subscribe";

Will become:

this.data.subscribeText.set("Subscribe");

Upvotes: 1

Related Questions