[解決済み] Reactでオブジェクトの単純な配列をループ処理する

質問

JSXを使っていません。これは問題なのでしょうか？これはバッドプラクティスとみなされるのでしょうか？

var links = [
  { endpoint: '/america' },
  { endpoint: '/canada' },
  { endpoint: '/norway' },
  { endpoint: '/bahamas' }
];

class Navigation extends React.Component {
  render() {
    return (
      <div className="navigation">
        <ul>
          const listItems = links.map((link) =>
            <li key={link.endpoint}>{link.endpoint}</li> 
          );
        </ul>
      </div>
    );
}

react ドキュメントの基本的なリストコンポーネントのセクションによると、配列の中身を表示することができるようです。 <ul></ul>

https://facebook.github.io/react/docs/lists-and-keys.html#basic-list-component

問題は、私がオブジェクトの配列を使っていることでしょうか？ドキュメントでは、単純な配列を使っています。正しい方向へ導いていただけると幸いです。

解決方法は？

問題は、あなたの構文が無効であることです、あなたは次のようになります。

var links = [
  { endpoint: '/america' },
  { endpoint: '/canada' },
  { endpoint: '/norway' },
  { endpoint: '/bahamas' }
];

class Navigation extends React.Component {
  render() {
    const listItems = links.map((link) =>
        <li key={link.endpoint}>{link.endpoint}</li> 
    );
    return (
      <div className="navigation">
        <ul>
          {listItems}
        </ul>
      </div>
    );
}