Doesn't open on click

So… I’m using it in this way:

import '!style!css!sass!react-dates/css/variables.scss';
import '!style!css!sass!react-dates/css/styles.scss';

function Test() {
  return (
   <DateRangePicker />
  );
}

It get properly rendered but when I click on the fields, the calendars are not shown…why?

[majapw]

Hi @FezVrasta! The DateRangePicker is a fully controlled component which means that you need to create a wrapper component that maintains the focused element and selected date in its state and updates those values using the provided onFocusChange and onDatesChange callbacks. You can see an example of the code you’d need for this kind of wrapper component here: https://github.com/airbnb/react-dates/blob/master/examples/DateRangePickerWrapper.jsx

Basically, without this setup, no interactions will work.

[realisation]

I was simply using it without any wrapper component in my jsx. Inside an enclosing parent div, I had two single date pickers with a span between them. But then I made a wrapper component doing a singledatepicker alone, by itself, in a parent div and it works just fine.

On Mon, Nov 20, 2017 at 7:33 AM, Erin Doyle [e-mail] wrote:

@realisation https://github.com/realisation can yo provide some code to show? Otherwise it’s hard to say what the problem may be with your approach.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/react-dates/issues/126#issuecomment-345682833, or mute the thread https://github.com/notifications/unsubscribe-auth/AM3aGb_6jEFcezkmvtbtcbGWiKXxwH-fks5s4XGPgaJpZM4KX-Hf .