// This will not work in React 16 and earlier const CreateTodo = () => { const mutation = useMutation({ mutationFn: event => { event.preventDefault() return fetch('/api', new FormData(event.target)) }}) return <form onSubmit={mutation.mutate}>...</form> } // This will work const CreateTodo = () => { const mutation = useMutation({ mutationFn: formData => { return fetch('/api', formData) }}) const onSubmit = event => { event.preventDefault() mutation.mutate(new FormData(event.target)) } return <form onSubmit={onSubmit}>...</form> }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter