{"id":1158,"date":"2023-12-24T18:10:29","date_gmt":"2023-12-24T17:10:29","guid":{"rendered":"https:\/\/r-raimann.de\/WordPress\/?p=1158"},"modified":"2023-12-24T18:10:29","modified_gmt":"2023-12-24T17:10:29","slug":"react-user-interactions","status":"publish","type":"post","link":"https:\/\/r-raimann.de\/WordPress\/react-user-interactions\/","title":{"rendered":"React: user interactions"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">component function App.jsx<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Logic<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from \"react\";\r\n\r\nexport function App() {\r\n  \/\/ state to handle the headline\r\n  \/\/\r\n  const &#91;headline, setHeadline] = useState('');\r\n\r\n  \/\/ state to handle the input date\r\n  \/\/\r\n  const &#91;inputValue, setInputValue] = useState(\"\");\r\n\r\n  \/\/ copy data from input state into headline state\r\n  \/\/\r\n  const buttonClicked = () => {\r\n    setHeadline(inputValue);\r\n  };\r\n\r\n  \/\/ store new input date in  input state\r\n  \/\/\r\n  const inputChanged = (event) => {\r\n    setInputValue(event.target.value)\r\n  };\r\n\r\n  return (\n\r    \/\/ ** RENDERING\n  );\r\n}\r\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>  return (\r\n    &lt;div>\r\n      &lt;h1>{headline}&lt;\/h1>\r\n      &lt;input type=\"text\" onInput={inputChanged}\/>\r\n      &lt;br \/>\r\n      &lt;button type=\"button\" onClick={buttonClicked}>\r\n        Make me big!\r\n      &lt;\/button>\r\n    &lt;\/div>\r\n  );<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>component function App.jsx Logic<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[37,232],"tags":[260,246,261,110],"class_list":["post-1158","post","type-post","status-publish","format-standard","hentry","category-latest","category-web-frontend","tag-interaction","tag-react","tag-state","tag-user"],"_links":{"self":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts\/1158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/comments?post=1158"}],"version-history":[{"count":1,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts\/1158\/revisions"}],"predecessor-version":[{"id":1159,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts\/1158\/revisions\/1159"}],"wp:attachment":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/media?parent=1158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/categories?post=1158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/tags?post=1158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}