javascriptreactjsmeteorflow-router

Display data from Meteor.call function with Flowrouter and trackerreact.


I have this code,

import React from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
const username = "test";
export default class TasksWrapper extends TrackerReact(React.Component){
    constructor(){
        super();
        Meteor.call('getMyInfo', (error,data)=>{
            if(error){
                alert(error);
            }else{
                this.username = data.username;
            }
        });
    }
    render(){
        return (
        <div className="container">
        <div className="row profile">
            {this.username}
        </div></div>
        )
    }
}

The line of codes above is not working. What I want is to display the username of the user in the div with class name of "row profile".

When I run this codes, I get only "test". It is displayed in the page. What I want to display is the usernae. for example, "John".

How can I do it? Any sample?


Solution

  • You need to store username by state so that when username changes, React will re-render the component:

    export default class TasksWrapper extends TrackerReact(React.Component) {
      constructor() {
        super();
        this.state = {
          username: ''
        };
        Meteor.call('getMyInfo', (error, data) => {
          if (error) {
            alert(error);
          } else {
            this.setState({username: data.username});
          }
        });
      }
      render() {
        return (
          <div className="container">
            <div className="row profile">
              {this.state.username}
            </div>
          </div>
        )
      }
    }