How to use the mobservable.makeReactive function in mobservable

mouseHandler.Cborder = 'green';
      mouseHandler.Ccolor = '#d5f765';
      mouseHandler.Sbackground = '#000';
      mouseHandler.Sborder = 'green';
      mouseHandler.Scolor = '#d5f765';
    }
  }
});

data.ddChange1 = x => { data.dd1 = x };
data.ddChange2 = x => { data.dd2 = x };
data.ddChange3 = x => { data.dd3 = x };
data.ddChange4 = x => { data.dd4 = x };
data.ddChangeGoal2 = x => { data.goal2 = x };

let disp = mobservable.makeReactive({
  rulesDisplayOn: 'none',
  rulesDisplayOff: 'inline',
  scoreDisplay: 'inline',
  scoreDisplay2: 'none'
});

@observer class B2 extends React.Component {
  // shouldComponentUpdate = shouldPureComponentUpdate;
  constructor(props) {
    super(props);
    this.mouse = mouseHandler;
    this.data = data;
    this.disp = disp;
    this.state = {
        d1: 0,
        d2: 0,

import {makeReactive} from 'mobservable';

// Create a reactive data structure
var todoStore = makeReactive({
	todos: [
		{
			title: 'Find a clean mug',
			completed: true
		},
		{
			title: 'Make coffee',
			completed: false
		}
	],
	completedCount: function() {
		return this.todos.filter((todo) => todo.completed).length;
	},
	pending: 0
});

};

class Messages extends React.Component {
  constructor(props) {
    super(props);
  }
  render = () => {
    return (
      <div style="{{fontSize:">
        {this.props.information}
      </div>
    );
  }
};

let mouseHandler = mobservable.makeReactive({
    0: '#83f7d7',
    1: '#83f7d7',
    2: '#83f7d7',
    3: '#83f7d7',
    4: '#83f7d7',
    5: '#83f7d7',
    6: '#83f7d7',
    7: '#83f7d7',
    8: '#83f7d7',
    9: '#9fc972',
    10: '#f7b16f',
    11: '#f7b16f',
    12: '#f7b16f',
    13: '#9fc972',
    14: '#9fc972',
    15: '#f7b16f',

11: '#f7b16f',
    12: '#f7b16f',
    13: '#9fc972',
    14: '#9fc972',
    15: '#f7b16f',
    19: '#9fc972',
    20: '#9fc972',
    21: '#9fc972',
    22: '#000000',
    23: '#000000',
    24: '#000000',
    25: '#000000',
    26: '#000000',
});

let data = mobservable.makeReactive({
  group: 'solo',
  chatMessage: '',
  chatArray: [],
  information: 'click ROLL to begin playing.',
  resPrevious: '',
  dd1: 0,
  dd2: 0,
  dd3: 0,
  dd4: 0,
  goal2: 20
});

data.ddChange1 = x => { data.dd1 = x };
data.ddChange2 = x => { data.dd2 = x };
data.ddChange3 = x => { data.dd3 = x };
data.ddChange4 = x => { data.dd4 = x };