What is the correct way to use `Mixin` in `React` ES6

Question

In ES5:

var TodoApp = React.createClass({
  mixins: [ReactFireMixin], //working fine
  ...
});

In ES6: (created using react cli )

class TodoApp extends Component {
    constructor(props) {
        super(props)
    }
    mixins= [ReactFireMixin] //not working
    ...
}

what is the correct way of doing this?

Answer 1

react-mixin solved my problem

CODE:

class TodoApp extends Component {
    constructor(props) {
        super(props)
    }        
    ...
}
reactMixin(TodoApp .prototype, ReactFireMixin);

Answer 2

Mixins are deprecated and are not supported by ES6 classes. See https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html. I used mixins extensively on a project a few years back and it ended up being super-hard to maintain. Use composition instead.