React-Dates in component using Redux

Question

As a newbie in React and Redux, i'm trying to use react-dates in a component.

This is my code:

import * as React from 'react';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as DateState from '../store/Date';
import * as SingleDatePicker from 'react-dates';

type DateProps = DateState.DateState & typeof DateState.actionCreators;

class DatePickerSingle extends React.Component<DateProps, any> {

    public render() {

        let { date } = this.props;
        return (
            <div>
                <SingleDatePicker
                    id="date_input"
                    date={this.props.date}
                    focused={this.state.focused}
                    onDateChange={(date) => { this.props.user({ date }); }}
                    onFocusChange={({ focused }) => { this.setState({ focused }); }}
                    isOutsideRange={() => false}
                    displayFormat="dddd LL">
                </SingleDatePicker>
            </div>
        );
    }
}

export default connect(
    (state: ApplicationState) => state.date, 
    DateState.actionCreators                 
)(DatePickerSingle);

This returns the following error:

Exception: Call to Node module failed with error: TypeError: Cannot read property 'focused' of null

focused an onFocusChange should receive the "datepicker state" as far as I understand.

Docs:

onFocusChange is the callback necessary to update the focus state in the parent component. It expects a single argument of the form { focused: PropTypes.bool }.

I think the problem is that I inject the DateState in the DatePickerSingle component, which doesn't know about focused state.

Is it possible to use my "own" state and the state from the DatePicker together? Or what is the best approach?

I'm trying for quite a while now, and I hope someone can help me with this.

UPDATE

score 1 · Accepted Answer · answered Mar 16 '17 at 13:25

1

The answer is quite simple: this.state is null because it has not been initialized. Just add

constructor() {
  super();
  this.state = {
    focused: false
  }
}

Anything coming from redux will be passed to your component as props, you can have component state in addition to that.

answered Mar 16 '17 at 13:25

OlliM

7,023
1
36
47

Thank you @OlliM! Though I'm getting the following error now: `Uncaught TypeError: Cannot read property 'getHostNode' of null`.. When I'm moving the cursor on `this.setState({ focused })` in Visual Studio, there is still no `focused` see screenshot in my updated question. – JK87 Mar 17 '17 at 09:44
Hmm that error seems to be solved, but still I get this error: `Exception: Call to Node module failed with error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'DatePickerSingle'.` – JK87 Mar 17 '17 at 10:38
Found the problem. The date attribute in the `singledatepicker` component was expecting a Momentjs [link](https://momentjs.com/) object. In my reducer I already formatted it, so it became a string. Everything works as expected now. Thank you for your help! – JK87 Mar 20 '17 at 09:57

React-Dates in component using Redux

1 Answers1