EditableCell.js

import React from 'react'
import PropTypes from 'prop-types'
import withEditableCellLogic from './with-editable-cell-logic'

const EditableCellView = ({
                        value,
                        modifyValue,

                        editing,
                        changedValue,
                        changeValue,
                        startEditing,
                        stopEditing,
                        checkEndChanging
                      }) => (
  <div className='EditableCell'>
    {editing
      ? (
        <input
          type='text'
          value={changedValue}
          onChange={changeValue}
          onKeyPress={checkEndChanging(modifyValue)}
          autoFocus
        />
      )
      : <div className='value' onClick={startEditing(value)}>{value}</div>
    }
  </div>
)

EditableCellView.propTypes = {
  value: PropTypes.string.isRequired,
  modifyValue: PropTypes.func.isRequired,
}

export default withEditableCellLogic(EditableCellView)