Meteor / React - return Meteor callback in render

Question

I do renderContacts and I'm trying to get results in a div with a contactResults id by calling renderContacts. It looks like that the problem is that the renderContacts() function doesn't wait for a Meteor.call and returns undefined right away. However, in the Meteor.call callback I get the right data from backend. So the problem only is that I don't know how I can make it to wait to a Meteor.call's callback.

class ContactsComponent extends React.Component {

    renderContacts() {

        return Meteor.call('parseClients', function(err, updatedContacts) {
            if (err) {
                console.log(err);
            } else {

                console.log(updatedContacts); // correct result in here

                if (updatedContacts.length) {
                    return contacts.map((contact, i) => (
                        <SingleContactRow key={contact._id} contact={contact}/>
                    ));
                }
            }
        });
    }

    render() {

        return (
            <div>

                <div>

                    <div id="contactResults">

                        {this.renderContacts()}

                    </div>

                </div>

            </div>
        );

    }
}

Here is the backend function:

'parseClients'() {
    return Contacts.findOne({});
  }

Muhaimin · Accepted Answer · 2017-07-22 03:35:11Z

1

How about place the meteor call in componentDidMount and make use react state

class ContactsComponent extends React.Component {
    constructor () {
       super()
       this.state = { contacts: [] }
    }
    componentDidMount() {
        Meteor.call('parseClients', function(err, contacts) {
            if (err)
                console.log(err);

            if (contacts.length)
                this.setState({ contacts }
        });
    }

    render() {
        const { contacts } = this.state
        return (
            <div>
               <div id="contactResults">
                {contacts.map((contact, i) => <SingleContactRow key={contact._id} contact={contact}/>)}
               </div>
            </div>
        );

    }
}

Please take note, you cannot return async function of Meteor.call.

answered Jul 22, 2017 at 3:35

Muhaimin

1,6362 gold badges26 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Meteor / React - return Meteor callback in render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related