【React学習用】Formik　FieldArrayの基本

こちらの記事では、

Formik FieldArrayの基本

について解説していきます

Formikを使って動的にFieldを増やしたい、という方には必見の内容となっております

この記事を通じて、

FieldArrayの使い方
FieldArrayの仕組み

を理解頂けることと思いますので、ぜひ最後まで読んでみて下さい

公式ページを参考にしながらもできるだけわかりやすく分解して解説していきます

それでは早速初めて行きましょう！

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

今回作成するページはこんな感じです！

簡単では有りますが、動的に作成するフォームを作成しています

下記のコード、解説を参考にご自身のものを作成してみて下さい

コードの紹介

インポート

import React from "react"
import {Formik, Form, Field, FieldArray } from "formik"

<Formik>にFieldArrayをrenderする

const FriendList = () => (
    <div>
        <h1>友達リスト</h1>
        <Formik 
            initialValues={{ friends: ["jared", "ian", "brent"]}}
            onSubmit={values =>
                setTimeout(() => {
                    alert(JSON.stringify(values, null, 2))
                }, 500)
            }
        >
            <Form>
                <FieldArray 
                    name="friends"
                    render={rendered_func}
                />
            </Form>
        </Formik>
    </div>
)

Formik > Form内に<FieldArray>コンポーネントをレンダーしています

さらに、そのFieldArrayに「render_func」というコンポーネントをレンダーしています

【render_funcコンポーネント】

const rendered_func = arrayHelpers => {
    const {form} = arrayHelpers
    const {values} = form
    return (
    <div>
        {values.friends && values.friends.length >0 ?
             (values.friends.map((friend, index) => 
                (
                 <div key={index}>
                     <Field name={`friends.${index}`} />
                     <button
                        type="button"
                        onClick={() => arrayHelpers.remove(index)}
                     >-</button>
                     <button
                        type="button"
                        onClick={() => arrayHelpers.push('')}
                     >+</button>
                 </div>
                ))
                ): (
                    <button type="button" onClick={() => arrayHelpers.push("")}>
                        Add a friend
                    </button>
                )}
                <div>
                    <button type="submit">Submit</button>
                </div>
    </div>
)}

構成としては、

<Field />コンポーネント
remove用のボタン
push用のボタン

となります

ただ、<Field />コンポーネントが一つもない場合は、

「Add a Friend」

というボタンを出現させるようにしています

下記にて解説をしていきます

解説

FriendList内

initialValues={{ friends: ["jared", "ian", "brent"]}}

initialValuesで、friendsという[]オブジェクトを作成しています

初期値は有りでも無しでも構いません

(全体のコードはこちら)

<FieldArray 
      name="friends"
      render={rendered_func}
/>

<Form>内に<FieldArray>をレンダーし、その中で

render={render_func}

とコンポーネントを並べる関数を指定します

(全体のコードはこちら)

render_func内

const rendered_func = arrayHelpers => {

props(ここでは、「arrayHelpers」とします)を受け取る

(全体のコードはこちら)

arrrayHelpersを見てみると、

いろいろなfunction等があることがわかります

このうち、今回のFieldArrayでは、

valuesを取り出すform
formを削除するremove
formを追加するpush

を主に使っています

(全体のコードはこちら)

valuesはmapファンクションでFieldに展開

removeとpushはボタンにonClickとして指定します

(全体のコードはこちら)

まとめ

以上、簡単な実例とその解説でした

FieldArrayを使うと簡単に動的なフォームが作成できるのがわかるかと思います

FieldArrayを使うには、

<FieldArray />内にfunctionをrender

function内で、必要なメソッドやvaluesを受け取り配置

する必要がありますので、上記のコードを参考に独自のものへと仕上げてみて下さい

本日もありがとうございました！！！