todoリストで追加時間などを表示させたい

Question

実現したいこと

Reactでtodoリストのようなものを作っており、追加した日時なども表示させたいです。

ソースコード

リストに該当する部分のソースコードです。

class TimeLine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeline: props.timeline,
      date: new Date()
    };
  }

  render() {
    let praise = [];
    for (let i in this.state.timeline) {
      todo.push(
        <div>
          <li>{this.state.timeline[i]}</li>
          <ul>
            {this.state.date.getMonth() + 1}/{this.state.date.getDate()}-
            {this.state.date.getHours()}:{this.state.date.getMinutes()}
          </ul>
        </div>
      );
    }

    return (
      <div>
        <ul>{todo}</ul>
      </div>
    );
  }
}

export default TimeLine;

わからないこと

この方法で実装し、todoを追加すると、2つ目以降全て1つ目の投稿の時間が表示されています。
どうすればそれぞれ投稿した日時を表示する事ができるでしょうか。

よろしくお願いいたします。

Comments

[m.ts10806]

React.js知ってるわけではないですがthis.state.timeline[i]　でtimelineが表示されるなら同じ階層にあるdateも同じく[i]で参照する必要があるように思うのですがどうなんでしょう。
一度変数に受け取った方が間違えにくいようにも思います。

[hello_whats_up]

回答ありがとうございます。
その方法でやってみたのですがきちんと表示されませんでした

[m.ts10806]

やってみたこととして質問本文に追記してください。
また「きちんと」は主観的な表現なので現象を具体的に説明願います

Answer 1

tutti56さんのご意見をReactのコードっぽくしておきました。
TodoItemは適当に作ったクラスですが、適切なところで定義して、適切にインスタンスを作ってTimeLineに渡してあげる必要があります。

TimeLineは表示だけをするクラスなのであれば (= todoリストのアイテムの追加、編集、削除などは親で担保するのであれば) tutti56さんからのご指摘のとおり、TimeLineのstateにtimelineを保持する必要はありません。親のstateで管理しておけば親のstateが変わったときに親のrenderが再度走りますのでTimeLineも再レンダリングされます

class TodoItem {
  constructor(title, createdAt) {
    this.title = title;
    this.createdAt = createdAt || new Date();
  }
}

class TimeLine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <ul>
          {
            this.props.timeline.map(todoItem => (
              <li>
                <p>{todoItem.title}</p>
                <p>{
                  `${todoItem.getMonth() + 1}/${todoItem.getDate()}-${todoItem.getHours()}:${todoItem.getMinutes()}`
                }</p>
              </li>
            )
          )
        }
      </ul>
      </div>
    );
  }
}

export default TimeLine;

Comments

[hello_whats_up]

回答ありがとうございます。
理論はわかったのですが、
>TodoItemは適当に作ったクラスですが、適切なところで定義して、適切にインスタンスを作ってTimeLineに渡してあげる必要があります。

ここのやり方を教えていただけないでしょうか。

[thyda.eiqau]

TimeLineを作るとき、親のコンポーネントで

const todoItems = [
new TodoItem('起きる', new Date()),
new TodoItem('歯磨き', new Date()),
new TodoItem('着替え', new Date()),
]
render() {
return <TimeLine timeline={todoItems} />
}

のようにしないといけないのはわかりますか？

つまり、親のコンポーネントで、TodoItemクラスを使えるようにしないといけないです。
TodoItem.jsとして別ファイルにしてexport defaultするのか、このままTimeLineと同じファイルに書きつつexportして、親コンポーネント側でimportするときにTimeLineとTodoItemの両方を使えるようにするか、になりますね。

[hello_whats_up]

丁寧にありがとうございました。

Answer 2

TimeLineコンポーネントのstate.dateを使い回してる事が同じ時間になる原因だと思います。
timelineがtodoのstringを持つ配列と推測しますが、timelineの追加時にdateも持たせてあげるとどうでしょうか？

多分setStateか何かをする必要があると思いますが、使い方を忘れているので以下を適宜reactで使える形に修正してみてください。

const timeline = [];

function addTimeline(text) {
  timeline.push({
    text,
    date: new Date(),
  });
}

それと、今回の場合はTimeLineコンポーネントのstateにprops.timelineをいれる必要がない気がします。
あとはfor inではなくmap使ってあげる形にする方がいいかなと思います。