React上で配列の操作をしたいときはないでしょうか。
けど、そんな中で悩むことは、
・React HookのuseStateで配列を操作する方法がわからならい
ですよね。
今回はそんなお悩みを解決する
・React HookのuseStateで配列を操作する方法
についてまとめます！
もくじ
React上の配列操作について
React上の配列操作について説明をします。
基本的な配列操作についてはJavascriptの配列操作と同様になります。
JavaScript の For文やmap() 関数を使った要素取得や、Push/Popメソッドを使った配列操作などが該当します。
React固有の点としてはuseStateなどReact Hookのライブラリを使用した配列操作でしょう。
まずは基本となる配列操作を振り返り、useStateを使った配列操作をご紹介していきたいと思います。
React上の配列操作の方法
React上の配列操作の方法について説明をします。
配列の値を画面に表示させる
サンプルコード
まずは、React上で定義した配列に値を代入し、HTML形式で配列の値を出力してみましょう。
以下サンプルコードです。
function App() {
const value1 = ["A商品","B商品","C商品"];
return (
<div>
<ul>
<li>{value1[0]}</li>
<li>{value1[1]}</li>
<li>{value1[2]}</li>
</ul>
</div>
);
}
export default App;配列へ代入した値が画面に表示されていますね。
コードの説明
配列に3つの要素を代入しています。
const value1 = ["A商品","B商品","C商品"];配列の各要素をインデックス番号を指定することで取得し、リストタグで囲み、リスト形式で表示させるようにしています。
<ul>
<li>{value1[0]}</li>
<li>{value1[1]}</li>
<li>{value1[2]}</li>
</ul>React HookのuseStateで配列を操作する方法
React HookのuseStateで配列を操作してみましょう。
useStateへ渡した配列の値を画面に表示させる
サンプルコード
useStateへ渡した配列の値を画面に表示させる方法について説明をします。
以下サンプルコードです。
import { useState } from "react"
function App() {
const [value1, setValue1] = useState(["A商品","B商品","C商品"]);
return (
<div>
<ul>
<li>{value1[0]}</li>
<li>{value1[1]}</li>
<li>{value1[2]}</li>
</ul>
</div>
);
}
export default App;useStateへ渡した配列の値が画面に表示されていますね。
コードの説明
useStateをインポートします。
import { useState } from "react"useStateへ渡した配列に3つの要素を代入しています。
const [value1, setValue1] = useState(["A商品","B商品","C商品"]);配列の各要素をインデックス番号を指定することで取得し、リストタグで囲み、リスト形式で表示させるようにしています。
<ul>
<li>{value1[0]}</li>
<li>{value1[1]}</li>
<li>{value1[2]}</li>
</ul>useStateへ渡した配列の値をFor文で画面に表示させる
useStateへ渡した配列の値をFor文で画面に表示させてみましょう。
以下の部分を
サンプルコード
<ul>
<li>{value1[0]}</li>
<li>{value1[1]}</li>
<li>{value1[2]}</li>
</ul>こちらに変更します。
<ul>
{list}
</ul>
return文の上にFor文を追加します。
const list = [];
for (const value of value1) {
list.push(<li>{value}</li>);
}変更後の全体コードはこちらになります。
import { useState } from "react"
function App() {
const [value1, setValue1] = useState(["A商品","B商品","C商品"]);
const list = [];
for (const value of value1) {
list.push(<li>{value}</li>);
}
return (
<div>
<ul>
{list}
</ul>
</div>
);
}
export default App;配列へ代入した値が画面に表示されていますね。
コードの説明
For文でvalue1の配列を1件づつ取り出し、別配列listへHTMLタグ付きで追加しています。
const list = [];
for (const value of value1) {
list.push(<li>{value}</li>);
}配列listの内容を出力します。
<ul>
{list}
</ul>
警告「Warning: Each child in a list should have a unique “key” prop.」について
警告「Warning: Each child in a list should have a unique “key” prop.」が表示される原因と対処法について説明をします。
原因
この警告の内容はリストの子アイテムに対してユニークの要素を設定したほうが良いですよという意味となり、
リストの子アイテムに対してKey要素を指定していないことが原因です。
対策
対策としてはリストの子アイテムに対してKey要素を追加していきます。
for (const value of value1) {
list.push(<li key={value}>{value}</li>);
}警告はなくなりましたね。
注意点
注意点としては、Key要素はユニークでないといけません。
重複する場合はエラーとなりますので、必ず値が一意である値を設定するようにしましょう。
useStateへ渡した配列の値をmap()メソッドで画面に表示させる
useStateへ渡した配列の値をmap()メソッドで画面に表示させてみましょう。
サンプルコード
return文の上にFor文を追加します。
const list = value1.map((value) => <li key={value}>{value}</li>)変更後の全体コードはこちらになります。
import { useState } from "react"
function App() {
const [value1, setValue1] = useState(["A商品","B商品","C商品"]);
const list = value1.map((value) => <li key={value}>{value}</li>);
return (
<div>
<ul>
{list}
</ul>
</div>
);
}
export default App;配列へ代入した値が画面に表示されていますね。
コードの説明
map()メソッドでvalue1の配列を1件づつ取り出し、別配列listへHTMLタグ付きで追加しています。
const list = value1.map((value) => <li key={value}>{value}</li>)
useStateへ渡した配列に値を追加しリストを再表示させる
useStateへ渡した配列に値を追加しリストを再表示させてみましょう。
サンプルコード
サンプルコードはこちらになります。
import { useState } from "react"
function App() {
const [value1, setValue1] = useState(["A商品","B商品","C商品"]);
const [value2, setValue2] = useState("");
const handleEdit = () => {
setValue1([...value1, value2]);
}
const handleEditFormChange = (e) => {
setValue2(e.target.value);
}
const list = value1.map((value) => <li key={value}>{value}</li>);
return (
<div>
<ul>
{list}
</ul>
<input
type="text"
value={value2}
onChange={handleEditFormChange}
/>
<button onClick={handleEdit}>保存</button>
</div>
);
}
export default App;入力フォームに値を入力し、保存ボタンをクリックします。
入力した値が配列へ追加され、その結果が画面に表示されていますね。
コードの説明
入力フォーム用にステートを追加しています。
const [value2, setValue2] = useState("");ボタンクリック時に受け取るハンドルです。入力フォームのステート変数を配列に代入しています。
const handleEdit = () => {
setValue1([...value1, value2]);
}入力フォーム操作時に値を受け取るハンドルです。受け取った値は追加ステートへ保存されます。
const handleEditFormChange = (e) => {
setValue2(e.target.value);
}入力フォームのタグ設定です。変更後にハンドラーが起動されます。
<input
type="text"
value={value2}
onChange={handleEditFormChange}
/>保存ボタンです。ボタンクリック後にハンドラーが起動されます。
<button onClick={handleEdit}>保存</button>React上の配列で条件を絞り込んで値を抽出する方法
React上の配列で条件を絞り込んで値を抽出する方法について別記事にまとめていますので、
こちらをご参考ください。
さいごに
いかがでしょうか。
今回は、
・React HookのuseStateで配列を操作する方法
についてまとめました。
また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました！
＞＞Amazonで詳細を見る
電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。
この記事の関連キーワード
「React Hook」の関連記事
こちらの記事の内容「React Hook」に関連する記事一覧です。
