[SOLVED] ES6 With mixins: [ReactMeteorData]

help
8

Do you use NPM packages? Think that React-Mixin is missing…

9

npm install react-mixin --save ? Yes

This one: https://www.npmjs.com/package/react-mixin ?

10

It’s the right package, yes. How you include it depends on your project really.
With MeteorHacks:NPM for instance. Unless you’re already using Meteor 1.3

11

:sweat_smile: Yeaaaaa 1.3

12

Cool. Haven’t touched it yet but I guess you just use npm install and are ready to go. It’s just a guess though :grinning:

13

Thanks. I’ll blame 1.3 but not a huge deal.

I’ll just use this method for now but that means I’d have to do this for every route

14

Haha…no don’t blame Meteor. It’s my fault - noob and all that. So, decorators won’t work in ES6 (it’s ES7). You’d have to use the mixin differently. Try:

reactMixin.class(App, ReactMeteorData)

15

like so:

import React from 'react';
import reactMixin from 'react-mixin';

reactMixin.class(App, ReactMeteorData)
export default class App extends React.Component {

...
16

I’d think so…gonna test it myself now :slight_smile:

17

Uncaught TypeError: _reactMixin2.default.class is not a function

18

import React from ‘react’;
import reactMixin from ‘react-mixin’;

reactMixin.class(App, ReactMeteorData)
export default class App extends React.Component {
…
}

Right. Saw that too. So put that mixin below your component and change the line to:

reactMixin(App.prototype, ReactMeteorData);

2 Likes
19

Sweet! Thanks! Works.

20

It always does in the end :slight_smile:

1 Like
21

ok so I did as you suggested but the result is still the same :rage:
here’s my code ` import React from ‘react’;
import {bootstrap} from ‘react-bootstrap’;
import ReactMixin from ‘react-mixin’;

export default class App extends React.Component {
getMeteorData(){
return{
task: Lessons.find({}, {sort: {createdAt: -1 }}).fetch(),
currentUser: Meteor.user()
}
},

getLesson() {
return lesson = Lessons.find().fetch();
},

render() {
return (


This is the home page of our blog



See Hello World Post



);
}
}

ReactMixin(App.prototype, ReactMeteorData);

` and I also tired to put that mixin before the react component but the same

22

Hi,

Any error messages? Also, I don’t think this bit will work as it’s outside the getMeteorData() block, so it won’t return any documents:

23

I was also following the instructions and got stuck with:
Uncaught TypeError: _reactMixin2.default.class is not a function

Any ideas?

24

So we have installed this:

npm install react-mixin --save

Then add the reactmeteordata.

Now our views:

import React from 'react';
import ReactMixin from 'react-mixin'; 

export default class App extends React.Component {
 getMeteorData() {}

 render(){
  return<h1>YES!</h1>
 }
}
ReactMixin(App.prototype, ReactMeteorData);

By looking at it, you maybe importing bootstrap incorrectly. You maybe after:

...

import bootstrap from "react-bootstrap"; // no curlies

...
25

You can solve this by using Higher order component. You can use Kadiras react komposer for that if you do not want to roll your own. It is a better solution IMHO.

26

Can we all go back to @roberto68 post? As I’ve marked this solved as it works for me. Thanks.

27

If I drop default keyword when creating the class, my code works as expected.