Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
import React from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
export default class extends React.Component {
constructor() {
this.randomPhrases = [
'empower seamless eyeballs',
'transition plug-and-play metrics',
'expedite next-generation initiatives',
'grow turn-key vortals',
'orchestrate front-end architectures',
'architect granular partnerships',
'reintermediate compelling e-tailers',
'deliver bleeding-edge schemas',
'utilize cutting-edge infomediaries'
this.changeState = this.changeState.bind(this);
// define the data we want to "watch"
@observable chosenPhrase = this.randomPhrases[0];
@observable counter = 0;
// define an "action" -> we are saying what that we want to change a peice of "watched" data
changeState() {
// changing our data will trigger the re-render by mobx
// just chosing a random phrase
this.chosenPhrase = this.randomPhrases[
Math.ceil(Math.random() * this.randomPhrases.length - 1)
// increase the counter
render() {
return (
<h1>Lean MobX React bullshit generator</h1>
<button onClick={ this.changeState }>Generate Some BS</button>
<h2>Go Tweet this:</h2>
<div>{ this.chosenPhrase }</div>
<h3>Demonstration of Some Mobx state shit</h3>
<div> {`Button Clicked ${this.counter} Times`}</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment