{"id":4792,"date":"2021-03-29T11:00:17","date_gmt":"2021-03-29T10:00:17","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=4792"},"modified":"2021-03-29T11:00:17","modified_gmt":"2021-03-29T10:00:17","slug":"react-select-input-options","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-select-input-options\/","title":{"rendered":"React: Select Input Options"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import React from \"react\";\n\nexport interface IOption\n{\n    label: string;\n    value: any;\n}\n\ninterface SelectProps {\n    label: string;\n    name: string;\n    value?: any;\n    options: IOption[];\n    onChange: (value: any) => void\n}\nconst value = event.target.value;\nexport function Select(props: SelectProps) {\n    return (\n        &lt;label>\n            &lt;span className=\"field\">{props.label}&lt;\/span>\n            &lt;select\n                name={props.name}\n                value={props.value}\n                placeholder={props.label}\n                onChange={(ev) => props.handleChange(ev.)}>\n                {props.options.map((o, i) => &lt;option key={i} value={o.value}>{o.label}&lt;\/option>)}\n            &lt;\/select>\n        &lt;\/label>\n    );\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4792","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=4792"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4792\/revisions"}],"predecessor-version":[{"id":4793,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4792\/revisions\/4793"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=4792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=4792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=4792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}