DatePicker Caches onChange

[PatrickDuncan]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Hey guys, I'm using Carbon with React. I'm using the DatePicker component and the onChange function is cached. I was accessing a state var outside of the onChange function (Hooks) and it was always set to the initial value. Other Carbon components had the updated state. Randomizing the key prop fixed the issue because it React re-renders components with a different key.

Chrome v74.0.3729.169

carbon-components: v10.3.0
carbon-components-react: v7.3.0

Steps to reproduce the issue

1. Use React Hooks to have a simple state that has 2 dates
   const [dates, setDates] = useState({date1: '', date2: ''})
2. Control the DatePickers with that state
3. When you use setDates you will need to use dates to ensure that changing 1 date doesn't clear the state of the other
4. You will notice that when you print the dates variable in your onChange function it will always be equal to the initial state {date1: '', date2: ''}
5. Meaning that the DatePicker is not re-rendering properly.

Sandbox

https://codesandbox.io/s/codesandbox-1r9ku