React + Reduxでメモアプリを作成(一覧表示④)

新規作成③からの続きをしていきたいと思います。
https://kazunaka.com/react-redux-memoapp-three/

一覧が表示できるとこまでやっていきたいと思います。

ファイルを編集

ディレクトリ「src」以下のファイルを編集していきます。

＊コードの重複部分もありますが、どこに記載していいかを分かりやすくしたくて
重複部分を書いているので、全部コピペでは完成はできないです。ご注意ください。

components/memoIndex.jsを編集します。
class MemoIndex extends Components {
の後に以下のソースを追加していきます。

＊ 以下の部分はバッククォートです。
シングルクォーテーションではうまく動かないです。

`/show/${memo.id}`

	
	componentDidMount() {
		this.props.getMemos();
	}

	renderMemos = () => {
		const memos = this.props.memos;
		return _.map(memos, memo =>(
			<tr key={memo.id}>
				<td>
					<Link to={`/show/${memo.id}`}>
						{memo.title}
					</Link>
				</td>
				<td>{memo.memo}</td>
			</tr>
		));
	}

render() {~~の関数の中の</thead>の次の１行後に以下を追加します。

					</thead>
					<tbody>
						{this.renderMemos()}
					</tbody>

アプリを実行

コマンドでアプリを実行しましょう。

$ yarn start

新規で追加したメモが表示されたら成功です。

次は追加したメモの取得をしていきたいと思います。
https://kazunaka.com/react-redux-memoapp-five/