CardComponent_with_Formik.js

// redux store로부터 불러온 card data
const { cards } = this.props;

{cards.map((card, idx) => {
    <Formik
       key={card.id}
          initialValues={{
            id: card.id,
            cardtype: card.cardtype,
            question: card.question,
            answer: card.answer,
            answer_target: card.answer_target,
            hint: card.hint,
           }}
           enableReinitialize={false}  // initial value가 변화할 때, form 초기화할지 여부(default값 false)
           onSubmit={(values, actions) => {
             // 함수 제출 시 실행될 함수
             editCard(values.card)
           }}
           >
           {({ values, handleChange, handleSubmit }) => {
                 return (
                    <form onSubmit={handleSubmit}>
                       Question. {idx + 1}
                         <TextField
                          name="question"
                          value={values.question}
                          onChange={(e) => {
                            handleChange(e);
                          }}
                         />

                        Answer. {idx + 1}
                         <TextField
                          name="answer"
                          value={values.answer}
                          onChange={(e) => {
                            handleChange(e);
                          }}
                         />
                       Hint. {idx + 1}
                         <TextField
                          name="Hint"
                          value={values.hint}
                          onChange={(e) => {
                            handleChange(e);
                          }}
                         />
                    </form>
                );
          }}
   </Formik>