Meteor-React: How to re-render on a state inside setState after Meteor.call callback finishes?

Question

Event summary:
I click edit button.
editForm() displays the form using this.setState() and this.state inside render().
The setState() above has the {this.state} as a value that I need to display.
Once I click update button inside the form, updateMessage() activates, which Meteor.call that includes a callback option.
This callback function has this.setState() that connects to that {this.state} I mentioned above.

So how do I make that {this.state} display after Meteor.call() callback and setState()?

-note- putting that {this.state} inside render() will display after callback.

Heres the code: this.state.show_error_or_noerror inside editMessage() is what I need to display.

constructor(props) {
super(props);

    const messageContent = this.props.messageContent;
    const username = this.props.username;
    const articleTitle = this.props.articleTitle;

    this.state = {
      show_error_or_noerror: '',
      messageContent: messageContent,
      username: username,
      articleTitle: articleTitle
    };

    this.editMessage = this.editMessage.bind(this);
    this.updateMessage = this.updateMessage.bind(this);

  }
  updateMessage(event) {
    event.preventDefault();

    const messageId = this.props.messageId;
    const messageContent = this.refMessage.value.trim();

    Meteor.call('message.update', messageId, messageContent, (error) => {
      if(error) {
        this.setState({show_error_or_noerror: error.reason});
      } else {
        this.setState({show_error_or_noerror: 'Updated successfully.'});
      }
    });
  }
  editMessage(event) {
    event.preventDefault();

    const messageId = this.props.messageId;

    this.setState({
      ['show_form'+messageId]: <form onSubmit={this.updateMessage}>
        <textarea
          ref={(textarea) => {this.refMessage = textarea;}}
          defaultValue={this.state.messageContent}
        />
        <h6>by {this.state.username}</h6>
        <h6>Article: {this.state.articleTitle}</h6>
        <button type="submit">Update</button>
        <button onClick={this.hideForm}>Hide</button>
        {this.state.show_error_or_noerror}
      </form>
    });
  }
  render() {
    const messageId = this.props.messageId;

    return (
      <span className="message_updator">
        <button onClick={this.editMessage}>Edit</button>
        {this.state['show_form'+messageId]}
      </span>
    )
  }
}

mutdmour · Accepted Answer · 2017-03-09 07:03:52Z

0

To achieve reactivity in meteor, create a Tracker.dependency object and have your render depend on it (ref).

Create a dependency in your constructor

var dep = new Tracker.Dependency;

And have your render depend on it

dep.depend();

And call this in your setState function

dep.changed();

answered Mar 9, 2017 at 7:03

mutdmour

5436 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Meteor_UN666 Over a year ago

I put dep = new Tracker.Dependency; as a global variable inside constructor. <br/> I put dep.depend(); inside render(). <br/> I put dep.changed() inside if else statements of Meteor.call callback. <br/> Noting changed.

mutdmour Over a year ago

I think the issue is with Meteor.call designed to only run once. Here's two packages for reactive meteor calls meteor-reactive-method and meteor-call

Meteor_UN666 Over a year ago

I removed Meteor.call() and only used this.setState(). it still did not rerender, so it is not a Meteor issue. I fixed it using react.

Collectives™ on Stack Overflow

Meteor-React: How to re-render on a state inside setState after Meteor.call callback finishes?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related