CODEWITHSUNDEEP
javascriptmeteorreactjs
ChrisWilson
ChrisWilson

Reputation: 459

React - State not updating

When I click the button that triggers subscribe() I'm trying to change this.state.subscribe to be the opposite boolean of what it is. I'm not even managing change the value of this.state.subscribed much less render different text when clicking the button. I've tried replaceState and adding call back function. Not exactly sure what I should be putting in the call back function though, if that's what I'm doing wrong. 

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

  getMeteorData: function(){
    Meteor.subscribe('posts');
    var handle = Meteor.subscribe('profiles');
    return {
      loading: !handle.ready(),
      posts: Posts.find().fetch(),
      profiles: Profiles.find({}).fetch()
    };
  },

  getInitialState: function(){
    var subscribed;
    return {
      subscribed: subscribed
    };
  },

  populateButton: function(){
    //fetch is cumbersome, later try and do this another way to make it faster
    var profile = Profiles.find({_id: Meteor.userId()}).fetch();
    if (profile.length > 0){
      this.state.subscribed =     profile[0].subreddits.includes(this.props.subreddit);
    }
  },

  subscribe: function(){
    this.setState({
      subscribed: ! this.state.subscribed
    }
      );
  },

  renderData: function(){
    return this.data.posts.map((post) => {
        return <SinglePost title={post.title} content={post.content} key={post._id} id={post._id} />
    });
  },

  render: function(){
    this.populateButton()
    return (
      <div>
        <button onClick={this.subscribe}>
          <p>{this.state.subscribed ? 'Subscribed' : 'Click To Subscribe'}</p>
        </button>
        <p></p>
    <ul>
      {this.renderData()}
    </ul>
  </div>
);

} });

Upvotes: 0

Views: 482

Answers (1)

Jake Haller-Roby
Jake Haller-Roby

Reputation: 6427

You can't set the state using this.state.subscribed = ..., which you are currently doing in populateButton. Trying to directly mutate the state like that will cause it to behave strangely.

You are also initializing subscribed with an undefined variable. You should give it an initial status of true or false.

Upvotes: 1

Related Questions