Skip to content

Instantly share code, notes, and snippets.

@mrmurphy
Created February 26, 2020 04:27
Show Gist options
  • Save mrmurphy/792d9b795c0abc23e6e2db431c2405ea to your computer and use it in GitHub Desktop.
Save mrmurphy/792d9b795c0abc23e6e2db431c2405ea to your computer and use it in GitHub Desktop.
egghead-tailwind-reason-react-style-an-input-border-dynamically
open React;
let onChangeText = (updator, event) => {
let v = ReactEvent.Form.target(event)##value;
updator(_ => v);
};
[@react.component]
let make = () => {
// State
let (content, content_set) = useState(_ => "");
// Derived State
let validationError =
content->Js.String2.length > 5 ? Some("That message is too long") : None;
<main>
<h1 className="text-2xl text-gray-800 font-bold"> "Hello!"->string </h1>
<input
className={Cn.make([
"border p-2 rounded",
"border-red-500"->Cn.ifSome(validationError),
])}
type_="text"
value=content
onChange={onChangeText(content_set)}
/>
{switch (validationError) {
| Some(message) =>
<div className="mt-2 text-red-500"> message->string </div>
| None => null
}}
</main>;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment