Divide code into smaller components ruins state

Question

I have following code:

https://codesandbox.io/s/react-datepicerhook-u2vv1

As you can see there is a working date picker and a none working date picker. The two date pickers are very similar so I would like to make a new component that just takes the parameter as name. However there is something in my state that goes wrong on the one I denormalized. Any pointers why and how to solve it?

Answer 1

You bound one more layer of arrow function, so add one more () when binding to props.

Change from this

as={<FormDatePicker />}

to

as={FormDatePicker()}