[TIL] 06.22 useFormikContext

주문 취소 페이지에서 주문 취소 버튼을 누르면 다이얼로그가 뜨고 거기서 확인을 누르면 api가 실행이 돼 주문 취소 요청이 전달된다. 

이때 formik으로 validation 체크를 진행해주어야 해서 formmik action을 사용해야 했다. 

다이얼로그 컴포넌트를 가져와 다이얼로그 컴포넌트 내 버튼으로 함수를 넘겨주어 실행 시켜 주려고 하였다. 하지만 formikaction 객체와 해장 form의 값을 넘겨 줄 수 없어서 다른 방법을 찾아야 했다. 

다이얼로그에 주문취소 컴포넌트에서 만든 버튼들을 넘겨주는 방식을 취해보았디만 역시 함수가 실행 되지 않았다. 

그래서 새로운 컴포넌트를 만들고 useFormikContext 이용해서 submitForm을 가져와 다이얼 로그로 넘겨주는 방식으로 해결하였다. 

import { FunctionComponent } from 'react';
import { useFormikContext } from 'formik';
import Dialog from 'component/Dialog';

const Claim = () => {
	const { submitForm } = useFormikContext();
    
    const handleSubmit = () => {
    	submitForm()
    }
	return(
    	<div>
        	<Dialog onClick={handleSubmit} />
        <div>
    )
}