実現したいこと

お世話になっております、この度初めてReact.jsを導入しました。
現在ToDoリストを制作しているのですが、タスクを登録した際に登録した日時もリストに反映される仕組みを構築したいと考えているのですが、完全に手詰まりになってしまいました。

是非皆様のお知恵をご教授いただけたら幸いです。
下記現状コードはReact公式サイトから初期コードを落とした状態のものからいじっている状態です。
何卒よろしくお願いいたします。

現状のソースコードが以下になります。

src/index.js
  class Tasks extends React.Component {
    render() {
     let key = 0;
     let taskVal = this.props.tasks.map((text) => {
       return <li key={key++}>{key}.{text}</li>;
    });
    return (
      <ul id="inputAreaList">{taskVal}</ul>
    );
  }
}

function Input(props) {
  return (
    <input type="text" id="inputArea" onChange={() => props.changeText()} />
  );
}

class TaskList extends React.Component {
  constructor() {
    super();
    this.state = {
      textValue: "",
      tasks: [],
    };
    this.changeText = this.changeText.bind(this);
  }
  changeText() {
    const inputArea = document.querySelector('#inputArea');
    const inputAreaValue = inputArea.value;
    this.setState({textValue: inputAreaValue});
  }
  clickAddTask() {
    const inputArea = document.querySelector('#inputArea');
    const inputAreaValue = inputArea.value;
    const textVals = this.state.tasks.concat(inputAreaValue);
    this.setState({tasks: textVals});
  }
  render() {
    return (
      <div>
        <Input changeText={this.changeText} />
        <p>{this.state.textValue}</p>
        <button className="buttons" onClick={() => this.clickAddTask()}>Add</button>
        <Tasks tasks={this.state.tasks} />
      </div>
    );
  }
}

ReactDOM.render(<TaskList />, document.getElementById('root'));
registerServiceWorker();

試したこと

let key= 0;
let taskVal = this.props.tasks.map((text) => {...});

の部分でまずdateを代入する変数を作成して
return {key}.{text}.{date}</li>;
のようになるようにしてみましたがダメでした。。。

また、react-timestampも入れて実装を試みましたが、結果は出力はされましたが、タスクを追加する度に既に追加されているタスクの日時まで更新されてしまい思った表示にならずダメでした。

clickAddTask() {...}

と同じイメージで、dateを追加もしてみましたが、思うようにいきませんでした。

clickAddTasks() {...}

の部分でテキストを配列に格納をしているのではないかと考え、その上のconstructorの部分で別途timeについてもthis.stateの中に記載をおこなってみたりはしたのですがなかなか思った出力はしてもらえませんでした。

試したいこと

上述しましたが、今回試したいことは以下になります。
- 入力フィールドから日付と時間が入ったToDoの追加ができる（今まで作成してきたものとほぼ同じものです）
- 各ToDoの削除が出来る
- 各ToDoの優先度を決めることができる