# React and FormData

DevFeed: [React and FormData](<https://devfeed.tech/articles/react-and-formdata-18961.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-form-data/>)

Author: Robin Wieruch

Published: 2024-11-11T04:50:46Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Forms](<https://devfeed.tech/topics/forms.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Raycast extension](<https://devfeed.tech/topics/raycast-extension.md>)

Tags: [errors](<https://devfeed.tech/tags/errors.md>), [forms](<https://devfeed.tech/tags/forms.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>), [react](<https://devfeed.tech/tags/react.md>), [react-form-data](<https://devfeed.tech/tags/react-form-data.md>), [schema](<https://devfeed.tech/tags/schema.md>), [server](<https://devfeed.tech/tags/server.md>), [validation](<https://devfeed.tech/tags/validation.md>), [zod](<https://devfeed.tech/tags/zod.md>)

## AI overview

This tutorial explains how to convert React FormData into a JavaScript object when submitting forms with actions. It covers concise conversion, destructuring, Zod typing and validation, and correctly handling multiple values with the same key, including checkbox and select inputs.

## Source excerpt

Learn how to handle FormData in React when submitting it with a (Server) Action to the server ...