mazeeblanke

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {

mazeeblanke

...
render () {

    return (
      <div className="keypad">
        {
          keypadKeys.map((block,index) => {
            return (
              <div key={index} className="block">
                {

mazeeblanke

import React from 'react';

export default ({ onButtonClick, buttonKey}) => {
  let handleClick = () => { onButtonClick(buttonKey) }
  return (
    <button onClick={handleClick}>
      { buttonKey }
    </button>
  );
}

mazeeblanke

export const keypadKeys = [
  ['c', '%', 'Del', '/'],
  ['7', '8', '9', '*'],
  ['4', '5', '6', '-'],
  ['1', '2', '3', '+'],
  ['0', '.','='],
]

mazeeblanke

import React, { Component } from 'react';
import { keypadKeys } from '../../utils/constants';
import Calculator from '../calculator'
export default class Keypad extends Component {
  handleClick = (key) => {
    this.props.calculate(key)
  }
  render () {
    return (
      keypadKeys.map(block => {

mazeeblanke

import React from 'react';
import { Textfit } from 'react-textfit';
export default (props) => {
return (
    <div className="screen--container">
      <Textfit
        max={40}
        throttle={60}
        mode="single"
        className="screen-top"

mazeeblanke

import Screen from './Screen'
import Keypad from './Keypad'
import Button from './Button'

export default {
  Screen,
  Keypad,
  Button
}

mazeeblanke

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { calculate, deleteLastEntry, clear, evaluateExpression } from './store/actions/calculate'
import Calculator from './components/calculator'
import * as fromCalculator from './store'
import './App.css'

export class App extends Component {
  
  componentDidMount () {

mazeeblanke

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,

mazeeblanke

import * as types from '../types';

export const calculate = (key) => {
  return {
    type: types.SET_EXPRESSION,
    payload: key
  }
}