React Demo Fix

by hashbyhayter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 60px;
  display: block;
}

button {
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

let renderCount = 0;

// Actions
const types = {
  CLICKED: 'click/CLICKED',
  UPDATE_VIEWING: 'viewing/UPDATE',
};

// Declare initial state
const EMOJI_INITIAL_STATE = [
  { parent: 'ID_A', id: 'ID_0', value: '🙈' },
  { parent: 'ID_A', id: 'ID_1', value: '🙉' },
  { parent: 'ID_A', id: 'ID_2', value: '🙊' },
  { parent: 'ID_B', id: 'ID_3', value: '🐱' },
  { parent: 'ID_B', id: 'ID_4', value: '😼' },
  { parent: 'ID_B', id: 'ID_5', value: '😹' },
  { parent: 'ID_C', id: 'ID_6', value: '🐟' },
  { parent: 'ID_C', id: 'ID_7', value: '🐠' },
  { parent: 'ID_C', id: 'ID_8', value: '🐡' },
];

function clickReducer(state = 0, action = {}) {
  switch (action.type) {
    case types.CLICKED:
      return state + 1;
    default:
      return state;
  }
}

// Actions
function clicked() {
	return {
    type: types.CLICKED,
  };
}

function emojiReducer(state = EMOJI_INITIAL_STATE, action = {}) {
  switch (action.type) {
    default:
      return state;
  }
}

function viewingReducer(state = 'ID_A', action = {}) {
  switch (action.type) {
    case types.UPDATE_VIEWING:
      return action.value;
    default:
      return state;
  }
}

// Actions
function updateViewing(value) {
  return {
    type: types.UPDATE_VIEWING,
    value
	};
}

const store = Redux.createStore(Redux.combineReducers({
  emojis: emojiReducer,
  clicks: clickReducer,
  viewing: viewingReducer,
}));

class emojiButtonComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render () {
    const { emojis, clicked, viewing } = this.props;
    renderCount += 1;
    return (<div>
        <div>
          Render Count: {renderCount}
        </div>
        <div>
          {emojis.filter(t => t.parent === viewing).map(t => (
            <button key={t.id} onClick={clicked}>
              {t.value}
            </button>))}
        </div>
    </div>) ;
  };
}

function mapStateToProps(state) {
	return {
    emojis: state.emojis,
    viewing: state.viewing,
  };
}

function...