TaskItems.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import TaskItem from "./TaskItem";
import { randomStr } from "../utils/util"

class TaskItems extends Component {
  static propTypes = {
    taskListId: PropTypes.num,
    taskItems: PropTypes.array,
    userId: PropTypes.string
  };

  constructor(props) {
    super(props);

    this.state = {
      taskListId: props.taskListId,
      taskItems: props.taskItems,
      userId: props.userId
    };

    console.log("props", props)

    console.log("task items", this.state.taskItems)

    this.addTaskItem = this.addTaskItem.bind(this);
  }

  addTaskItem(event) {

  }

  render() {



    // let taskItems = this.state.taskItems.map(ti => (
    //   <TaskItem
    //     id={ti.id}
    //     name={ti.name}
    //     status={ti.status}
    //     dueDate={ti.dueDate}
    //     startDate={ti.startDate}
    //     finishDate={ti.finishDate}
    //     taskListId={this.state.taskListId}
    //     key={randomStr()}
    //   />
    // ));


    return (
      <div className="">
        {/* Button to add task item */}
        <div className="pull-right">
          <button onClick={this.addTaskItem}>Add Task Item</button>
        </div>

        <div>
          {/* {taskItems} */}
        </div>
      </div>
    );
  }
}

export default TaskItems;