Reactで配列にpushしたオブジェクトを描画したいのですが、うまく行きません

Question

###前提・実現したいこと
連想配列のテンプレートに新しいデータを代入し、代入後のデータを配列の中にpushする
↓
その連想配列を元にReactで定義したテンプレートにデータを当てて描画する

###発生している問題

配列内すべての要素に同じデータが入っていることになり、すでに描画されたデータも入力した値に書き換わってしまいます

###該当のソースコード

var cnt = 0;
var content = {
  link  : "",
  title : "",
  id    : 0,
  time  : ""
};
var contentsList = [];
var test = () => {
  content['title'] = document.querySelector('#input1').value;
  content['link']  = document.querySelector('#input2').value;
  content['id']    = cnt++;
// 作ったデータをプッシュする
 contentsList.push(content);
// 描画する
 ReactDOM.render(
    <ContentsList contentsList={contentsList} />,
    document.querySelector('#container')
 );
}

const ContentsList = props => {     //コンテンツリストコンポーネント定義
  return(
    <ul className="contents">
      {
        props.contentsList.map((content, index) => {<Content content={content} index={index} />});
      }
    </ul>
  )
}

const Content = props => {      //コンテンツコンポーネント定義
  var content = props.content;
  return (
    <li id={"content_" + (props.index)} className="content">
      <ContentLink link={content.link} index={props.index} />
      <br />
      <ContentTitle title={content.title} index={props.index} />
      <ContentTime time={props.time} index={props.index} />
      <ContentNumber index={props.index} />
    </li>
  );
}

// それ以下のコンポーネントは省略します

###試したこと

• console.logでcontentListの要素のなかみを確認しましたが、すべて同じid,titleで、inputから新たにデータを入力するたびにすべての要素が同じ値になっていました。

###補足情報(言語/FW/ツール等のバージョンなど)

<script type="text/javascript" src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script type="text/javascript" src="https://fb.me/react-15.1.0.js"></script>
<script type="text/javascript" src="https://fb.me/react-dom-15.1.0.js"></script>
<script type="text/jsx" src="./main2.jsx"></script>

使っているReactのバージョンです

Answer 1

contentの変数を持ち回している（再利用している）ことが原因かと思われます。
動確はしていませんが、以下のように変更してみるとどうでしょうか。

var test = () => {
  var content = {
    link  : "",
    title : "",
    id    : 0,
    time  : ""
  }; // contentの定義場所をtestメソッド内に変更する
  content['title'] = document.querySelector('#input1').value;
  content['link']  = document.querySelector('#input2').value;
  content['id']    = cnt++;
// 作ったデータをプッシュする
 contentsList.push(content);
// 描画する
 ReactDOM.render(
    <ContentsList contentsList={contentsList} />,
    document.querySelector('#container')
 );
}

Comments

[ahaha0807_alg]

ありがとうございます！
無事に実装出来ました！また何かあればよろしくお願いします！