{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/react-js/events-forms","result":{"data":{"mdx":{"id":"8e48eab6-d220-5720-bf46-8d4a48287891","excerpt":"Introduction Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that…","fields":{"slug":"/react-js/events-forms/"},"frontmatter":{"title":"Handling Events and Forms","description":"events | forms | React | RefugeesCode","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Handling Events and Forms\",\n  \"description\": \"events | forms | React | RefugeesCode\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"introduction\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#introduction\",\n    \"aria-label\": \"introduction permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Introduction\"), mdx(\"p\", null, \"Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called state (remember about this in our previous section \\uD83E\\uDD13). You can add state to any component, and update it as needed. In this section, you\\u2019ll learn how to write components that handle interactions.\"), mdx(\"h2\", {\n    \"id\": \"goals\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#goals\",\n    \"aria-label\": \"goals permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Goals\"), mdx(\"ul\", {\n    \"className\": \"contains-task-list\"\n  }, mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Different ways to write an event handler\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"How to pass event handling logic from a parent component\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<form>\"), \" elements\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Displaying different content based on certain conditions\")), mdx(\"h2\", {\n    \"id\": \"basic-tools\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#basic-tools\",\n    \"aria-label\": \"basic tools permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Basic tools\"), mdx(\"p\", null, \"In regular HTML, when we work with an input element, the page\\u2019s DOM maintains that element\\u2019s value in its DOM node. It\\u2019s possible to access the value via methods like: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"document.getElementById(\\u2018email\\u2019).value\"), \". The DOM is our storage.\"), mdx(\"p\", null, \"In React, when working with forms or any other user input fields such as standalone text fields or buttons, developers have an interesting problem to solve. From React\\u2019s documentation: \\u201C\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"React components must represent the state of the view at any point in time and not only at initialization time.\"), \"\\u201D React is all about keeping things simple by using declarative style to describe UIs. React describes the UI, its end stage, and how it should look.\"), mdx(\"p\", null, \"Can you spot a conflict? In the traditional HTML form elements, the state of the elements will change with the user input. React uses a declarative approach to describe the UI. The input needs to be dynamic to reflect the state properly.\"), mdx(\"p\", null, \"If developers opt NOT to maintain the component state (in JavaScript), nor sync it with the view, then it creates problems \\u2014 there might be a situation when internal state and view are different and React won\\u2019t know about changed state. This can lead to all sorts of trouble, and mitigates the simple philosophy of React. The best practice is to keep React\\u2019s \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"render()\"), \" as close to the real DOM as possible, and that includes the data in the form elements.\"), mdx(\"h2\", {\n    \"id\": \"contents\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#contents\",\n    \"aria-label\": \"contents permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Contents\"), mdx(\"h3\", {\n    \"id\": \"event-handling-in-react\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#event-handling-in-react\",\n    \"aria-label\": \"event handling in react permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Event handling in React\"), mdx(\"p\", null, \"React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.\"), mdx(\"p\", null, \"Built-in components like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<button>\"), \" only support built-in browser events like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \". However, you can also create your own components, and give their event handler props any application-specific names that you like.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export default function App() {\\n  return (\\n    <Toolbar\\n      onPlayMovie={() => alert('Playing!')}\\n      onUploadImage={() => alert('Uploading!')}\\n    />\\n  );\\n}\\n\\nfunction Toolbar({ onPlayMovie, onUploadImage }) {\\n  return (\\n    <div>\\n      <Button onClick={onPlayMovie}>\\n        Play Movie\\n      </Button>\\n      <Button onClick={onUploadImage}>\\n        Upload Image\\n      </Button>\\n    </div>\\n  );\\n}\\n\\nfunction Button({ onClick, children }) {\\n  return (\\n    <button onClick={onClick}>\\n      {children}\\n    </button>\\n  );\\n}\\n\")), mdx(\"p\", null, \"\\uD83D\\uDCC4 Read the official documentation with practical examples - \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://react.dev/learn/responding-to-events\"\n  }, \"Responding to Events\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Recap\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can handle events by passing a function as a prop to an element like \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<button>\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Event handlers must be passed, \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"not called!\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onClick={handleClick}\"), \", not \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onClick={handleClick()}\"), \" .\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can define an event handler function separately or inline.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Event handlers are defined inside a component, so they can access props.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can declare an event handler in a parent and pass it as a prop to a child.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can define your own event handler props with application-specific names. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Events propagate upwards. Call \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"e.stopPropagation()\"), \" on the first argument to prevent that.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Events may have unwanted default browser behavior. Call \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"e.preventDefault()\"), \" to prevent that.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Explicitly calling an event handler prop from a child handler is a good alternative to propagation.\")), mdx(\"h3\", {\n    \"id\": \"exercise-handling-events\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercise-handling-events\",\n    \"aria-label\": \"exercise handling events permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercise: Handling Events\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Objective\"), \":\"), mdx(\"p\", null, \"Learn how to handle events in React JS by building an interactive form.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Steps\"), \":\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Create a new file named Form.js in the src directory.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Import the necessary React libraries and components.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Define a class-based component named Form.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Inside the Form component, initialize a state variable for each form field (e.g., name, email).\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Create a method for handling form field changes and updating the state accordingly.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Render a JSX form element with input fields for each form field.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Add event handlers to each input field to trigger the form field change method.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Export the Form component as the default export.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In the App.js file, import and render the Form component.\")), mdx(\"p\", null, \"*Taken from \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://medium.com/@asiandigitalhub/practical-exercises-in-the-react-js-tutorial-b56fdbd8d812\"\n  }, \"Practical Exercises in the React JS Tutorial\")), mdx(\"h3\", {\n    \"id\": \"controlled-components-and-uncontrolled-components\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#controlled-components-and-uncontrolled-components\",\n    \"aria-label\": \"controlled components and uncontrolled components permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Controlled components and uncontrolled components\"), mdx(\"p\", null, \"It is common to call a component with some local state \\u201Cuncontrolled\\u201D.\"), mdx(\"p\", null, \"In contrast, you might say a component is \\u201Ccontrolled\\u201D when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior.\"), mdx(\"p\", null, \"Uncontrolled components are easier to use within their parents because they require less configuration. But they\\u2019re less flexible when you want to coordinate them together. Controlled components are maximally flexible, but they require the parent components to fully configure them with props.\"), mdx(\"p\", null, \"In practice, \\u201Ccontrolled\\u201D and \\u201Cuncontrolled\\u201D aren\\u2019t strict technical terms\\u2014each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer.\"), mdx(\"p\", null, \"When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Controlled component\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Uncontrolled Component\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The component is under control of the component\\u2019s state.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Components are under the control of DOM.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"These components are predictable as are controlled by the state of the component.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Are Uncontrolled because during the life cycle methods the data may loss\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Internal state is not maintained\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Internal state is maintained\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"It accepts the current value as props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"We access the values using refs\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Does not maintain its internal state.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Maintains its internal state.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Controlled by the parent component.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Controlled by the DOM itself.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Have better control on the form data and values\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Has very limited control over form values and data\")))), mdx(\"p\", null, \"\\uD83D\\uDCC4 Read more detailed information - \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.geeksforgeeks.org/controlled-vs-uncontrolled-components-in-reactjs/\"\n  }, \"Controlled vs Uncontrolled Components in ReactJS\")), mdx(\"h3\", {\n    \"id\": \"forms-in-react\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#forms-in-react\",\n    \"aria-label\": \"forms in react permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Forms in React\"), mdx(\"p\", null, \"The \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\"\n  }, \"built-in browser \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"<form>\"), \" component\"), \" lets you create interactive controls for submitting information.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<form action={search}>\\n    <input name=\\\"query\\\" />\\n    <button type=\\\"submit\\\">Search</button>\\n</form>\\n\")), mdx(\"h4\", {\n    \"id\": \"props\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#props\",\n    \"aria-label\": \"props permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Props\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<form>\"), \" supports all \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://react.dev/reference/react-dom/components/common#props\"\n  }, \"common element props\"), \".\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action\"\n  }, \"action\"), \": a URL or function. When a URL is passed to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" the form will behave like the HTML form component. When a function is passed to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" the function will handle the form submission. The function passed to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" may be async and will be called with a single argument containing the form data of the submitted form. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" prop can be overridden by a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formAction\"), \" attribute on a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<button>\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input type=\\\"submit\\\">\"), \", or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<input type=\\\"image\\\">\"), \" component.\"), mdx(\"h4\", {\n    \"id\": \"warning\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#warning\",\n    \"aria-label\": \"warning permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Warning\"), mdx(\"p\", null, \"When a function is passed to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formAction\"), \" the HTTP method will be POST regardless of value of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"method\"), \" prop.\"), mdx(\"p\", null, \"\\uD83D\\uDCC4 Read about \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<form>\"), \" usage - \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://react.dev/reference/react-dom/components/form#usage\"\n  }, \"Usage\")), mdx(\"h3\", {\n    \"id\": \"exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises\",\n    \"aria-label\": \"exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://codesandbox.io/p/sandbox/react-form-practice-jvnn9?file=%2Fsrc%2Findex.js\"\n  }, \"React form practice\")), mdx(\"h3\", {\n    \"id\": \"conditional-rendering\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#conditional-rendering\",\n    \"aria-label\": \"conditional rendering permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Conditional rendering\"), mdx(\"p\", null, \"In React, there is no special syntax for writing conditions. Instead, you\\u2019ll use the same techniques as you use when writing regular JavaScript code. For example, you can use an \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else\"\n  }, \"if\"), \" statement to conditionally include JSX:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"let content;\\nif (isLoggedIn) {\\n  content = <AdminPanel />;\\n} else {\\n  content = <LoginForm />;\\n}\\nreturn (\\n  <div>\\n    {content}\\n  </div>\\n);\\n\")), mdx(\"p\", null, \"If you prefer more compact code, you can use the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator\"\n  }, \"conditional ? operator\"), \". Unlike if, it works inside JSX:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<div>\\n  {isLoggedIn ? (\\n    <AdminPanel />\\n  ) : (\\n    <LoginForm />\\n  )}\\n</div>\\n\")), mdx(\"p\", null, \"When you don\\u2019t need the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"else\"), \" branch, you can also use a shorter \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation\"\n  }, \"logical && syntax\"), \":\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<div>\\n  {isLoggedIn && <AdminPanel />}\\n</div>\\n\")), mdx(\"p\", null, \"All of these approaches also work for conditionally specifying attributes.\"), mdx(\"h2\", {\n    \"id\": \"further-reading\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#further-reading\",\n    \"aria-label\": \"further reading permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Further Reading\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCC4 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://dev.to/misszamzam/an-introduction-to-react-events-4l6m\"\n  }, \"An Introduction to React Events\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCC4 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.knowledgehut.com/blog/web-development/handling-react-events-guide\"\n  }, \"Handling React Events - A Detailed Guide\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCC4 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://react.dev/learn/conditional-rendering\"\n  }, \"Conditional rendering\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDC69\\u200D\\uD83D\\uDCBB\\uD83E\\uDDD1\\u200D\\uD83D\\uDCBB Exercises: \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://codesandbox.io/p/sandbox/react-handling-inputs-events-practice-i12p1?file=%2Fsrc%2Findex.js\"\n  }, \"React handlings inputs & events\"))));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"Introduction"},{"depth":2,"value":"Goals"},{"depth":2,"value":"Basic tools"},{"depth":2,"value":"Contents"},{"depth":3,"value":"Event handling in React"},{"depth":3,"value":"Exercise: Handling Events"},{"depth":3,"value":"Controlled components and uncontrolled components"},{"depth":3,"value":"Forms in React"},{"depth":4,"value":"Props"},{"depth":4,"value":"Warning"},{"depth":3,"value":"Exercises"},{"depth":3,"value":"Conditional rendering"},{"depth":2,"value":"Further Reading"}]}},"pageContext":{"slug":"/react-js/events-forms/","prev":{"label":"States","link":"/react-js/states"},"next":{"label":"React Router","link":"/react-js/router"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/react-js/events-forms.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}