TasksList.js

import React, { Component } from 'react'
import classnames from 'classnames'
import TaskItem from './TaskItem'
import { addTask } from './actions/tasks-actions'
import { connect } from 'react-redux'

class TasksList extends Component {
  constructor(props) {
    super(props)

    this.state = {
      taskContent: ''
    }
  }

  myLogicToHandleOnChangeEvent = (e) => {
    const value = e.target.value
    
    this.setState((prevState, ownProps) => {
      return {
        taskContent: value.toUpperCase()
      }
    })
  }

  render() {
    return (
      <React.Fragment>
        {this.props.tasksFromStore.map(task => (
          <TaskItem key={task.id} task={task} />
        ))}

        <br />
        <div className="pa4 black-80">
          <div className="measure">
            <label htmlFor="name" className="f6 b db mb2">
              Task content
            </label>
            <div className="flex w-100">
              <input
                id="name"
                className="input-reset ba b--black-20 pa2 flex-auto"
                type="text"
                value={this.state.taskContent}
                onChange={this.myLogicToHandleOnChangeEvent}
              />
              <button className="input-reset bg-black-80 white f5 pv2 pv3-ns ph4 ba b--black-80 bg-hover-mid-gray">
                Add Task
              </button>
            </div>
          </div>
        </div>
      </React.Fragment>
    )
  }
}

function mapStateToProps(globalState, ownProps) {
  return {
    tasksFromStore: globalState.tasksList
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onAdd: () => {
      dispatch(addTask())
    }
  }
}

const ConnectedTasksList = connect(mapStateToProps, mapDispatchToProps)(
  TasksList
)

export default ConnectedTasksList