How to set input as invalid state (red) when invalid date

[coreysnyder]

I've been poking at this for way too long and so I'm coming here in hopes to get help. Is there a way to give the component/input box a red border, or a class, or anything when the entered value is invalid.

So the field isn't required, You click in the input and type 2019-55-55 and tab out. Right now the component doesn't fire the onChange event so I have no hook at responding to changes in the component when an invalid date is entered. Any help would be greatly appreciated!

I tried modifying the component to call this.props.onInvalid() at the end of the handleBadInput() but that led me down a pretty bad path that didn't work. Basically if I do that, I can pass a function to the component for onInvalid which I manually set the class that I need on the container of the component. But this causes a re-render of the component and so the date gets re-set to the previous valid value, since the value isn't updated on state if the input value is invalid.