Task-List: Adding, updating and deleting tasks with CSS animations

Question

I would really like to improve, so any feedback is so appreciated!

Tasks.js

class Tasks extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tasks: [],
      nextId: null
    }
  }

  componentDidMount() {
    this.getTasks()
  }

  getTasks() {
    const tasks = List(this.state.tasks).push({ id: 1, name: 'Task 1'}, { id: 2, name: 'Task 2'}, { id: 3, name: 'Task 3'})
    this.setState({ tasks, nextId: 4 })
  }

  postTask() {
    const tasks = List(this.state.tasks).push({ id: this.state.nextId, name: `Task ${this.state.nextId}` })
    const nextId = this.state.nextId + 1
    this.setState({ tasks, nextId })
  }

  deleteTask(index) {
    const tasks = List(this.state.tasks).delete(index)
    this.setState({ tasks })
  }

  render() {
    return (
      <div>
        <div className='slide-fade'>
          {this.state.tasks.map((task, index) => (
            <Task
              key={task.id}
              deleteTask={() => this.deleteTask(index)}
              putTask={() => this.putTask(index)}
              name={task.name}
            />
          ))}
        </div>
        <button onClick={() => this.postTask()}>
          <i className='fa fa-plus fa-lg'></i>
        </button>
      </div>
    )
  }
}

Task.js

class Task extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: null,
      show: false,
      edit: false
    }
  }

  componentDidMount() {
    setTimeout(() => this.setState({ name: this.props.name, show: true }), 25)
  }

  onClickDelete() {
    this.setState({ show: false }, () => setTimeout(this.props.deleteTask, 250))
  }

  onClickEdit() {
    this.setState({ edit: true })
  }

  putTask() {
    this.setState({ edit: false })
  }

  onChangeInput(event) {
    this.setState({ name: event.target.value })
  }

  onKeyDownInput(event) {
    if(event.keyCode === 38) { // UP
      event.preventDefault()
    }
    if(event.keyCode === 13) { // ENTER
      this.putTask()
    }
  }

  render() {
    if(this.state.edit) {
      return (
        <input
          type='text'
          value={this.state.name}
          onChange={this.onChangeInput.bind(this)}
          onBlur={this.putTask.bind(this)}
          onKeyDown={this.onKeyDownInput.bind(this)}
          ref={input => input && input.focus()}
        />
      )
    }
    return (
      <div className={this.state.show ? 'item show' : 'item'}>
        <span className='item-text'>{this.state.name}</span>
        <span className='item-icons'>
          <i className='fa fa-pencil' onClick={() => this.onClickEdit()}></i>
          <i className='fa fa-ban' onClick={() => this.onClickDelete()}></i>
        </span>
      </div>
    )
  }
}