CODEWITHSUNDEEP
reactjsmeteor
JoeTidee
JoeTidee

Reputation: 26054

Props are not being passed into a React component from Meteor createContainer

I have a really annoying issue and can't understand why it's happening. I have the following container:

export default SomeContainer = createContainer(( params ) => {

    const handle1 = Meteor.subscribe('SomePub');
    const isReady1 = handle1.ready();

    var someData = [];
    if( isReady1 ){
         someData = collections.SomeColl.find({}).fetch();
    }

    console.log(someData);

    return {
        someData: someData
    };

}, SomeComponent);

Here is the component:

export class SomeComponent extends Component {
    constructor(props) {
        super(props);
        console.log(this.props);
    }
};

When I console.log the contents of someData from with the container, it contains some data. However, when I check for someData in the props of the component, it just shows someData as an empty array.

Anyone know what's going on?

Upvotes: 1

Views: 350

Answers (1)

JeremyK
JeremyK

Reputation: 3240

If you look at your console log you should see the following:

  1. logging from createContainer, showing someData is [] - because createContainer returns before the data has been fetched.

  2. logging from SomeComponent.constructor, showing the same - this.props is [] (empty array)

  3. logging from createContainer, showing data in someData e.g. [Object, Object, Object, Object, Object] - your client now has the data in miniMongo, and has rerendered your component.

When your component receives the data from the server, it rerenders - rerunning createContainer, and the component's render method - but not the constructor.

If you move console.log(this.props); from your constructor to your render method, you will see it has received the data, and if you include it in the output, you will see it in the browser.

Upvotes: 1

Related Questions