Does not fire onchange to React Datepicker?

Good day! Please explain why React when onchange in the datepicker inserts the date that you choose (just leave the date that is)? In the console shows the normal date(MM/DD/YYYY), error, no knocks. Use react/redux.
Here is the code renderer in another component...
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
const DayPickerSection = ({}) => {
 return (
the <div>
 <datepicker selected="{moment()}" onchange="{(date)" => moment(date).format('MM/DD/YYYY')}/>
</datepicker></div>
);
};

export default DayPickerSection;

Or redux you need to do the change yourself in action or somewhere else?
I would be grateful for help!
July 2nd 19 at 17:53
2 answers
July 2nd 19 at 17:55
You have on onChange function, which simply formats the date. I even find it difficult to say what this will effect, but mine no.

Need onChange to pass the function the Creator of the action, for example, we will be myAction.

Therefore, somewhere in the actions is code like this:

export function myAction(date) {
 return {
 type: 'CHANGE_DATE',
 data: date
}
}


Then somewhere in redusere must be a matching condition, for example, in the case 'CHANGE_DATE' you will be set to current date. (especially don't write code, so some work yourself).

In the end, in your container, you should be mapStateToProps and mapDispatchToProps such as the following:

const mapStateToProps = (state) => ({
 dates: state.dates,
})

const mapDispatchToProps = (dispatch) => ({
 myAction: (date) => dispatch(myAction(date)),
})


Well, the connection DayPickerSection will look something like this:

<daypickersection selected="{this.props.dates.current}" myaction="{this.props.myAction}"></daypickersection>


And in the render (I mean the render DayPickerSection) is therefore:

const DayPickerSection = ({selected, myAction}) => {
 return (
the <div>
 <datepicker selected="{selected}" onchange="{(date)" => myAction(date) }/>
</datepicker></div>
);
};


Total (read slowly): in onChange DatePicker component will get the property this.props.myAction "prekinuto" in DayPickerSection. In turn, DayPickerSection this property will be equal to a function that will "prekinuta" with mapDispatchToProps in this.props container. Container, call it what you want, in our case the parent element, for example, that "preconnected" (using the connect function), and which because of this takes his this.props data described in mapStateToProps and mapDispatchToProps, which in turn are sort of the cards. That is, ultimately in this.props.myAction your container will be a function myAction from your folder actions. Of course, for this it is necessary to import in the beginning of the file (import { myAction } from '../actions'.)

The container might look like this:

import React { Component } from 'react'
import { connect } from 'react-redux'
import { myAction } from '../actions'

class App extends Component {
 render() {
 const { dates, myAction } = this.props

 return (
 <div classname="my-app">
 <daypickersection selected="{dates.current}" myaction="{myAction}">
</daypickersection></div>
)
}
}

const mapStateToProps = (state) => ({
 dates: state.dates,
})

const mapDispatchToProps = (dispatch) => ({
 myAction: (date) => dispatch(myAction(date)),
})

export default connect(mapStateToProps, mapDispatchToProps)(App)
Thanks for the detailed response! But still not smart enough to do.) Below is the question, if not difficult, look please.. - Jacinthe.Turn commented on July 2nd 19 at 17:58
July 2nd 19 at 17:57
After reviewing many examples made in the following way ...
In Devtools.Instrumet() all recorded state changes, but the date in the input - no. Can't understand what the problem is.
482206eaed694120ab2e23396b7a9a77.png
//Action 
export function checkDate(changeDate) {
 return {
 type: types.CHANGE_DATE,
changeDate
};
}

//component/DatePickerSection
import React { PropTypes } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const DayPickerSection = ({selected, changeDate}) => {
console.log(selected);
 return (
the <div>
 <datepicker selected="{selected}" onchange="{changeDate}/">
</datepicker></div>
);
};

DayPickerSection.propTypes = {
 selected: PropTypes.object
 changeDate: PropTypes.func
};

export default DayPickerSection;

// containers/DatePickerCont

import React {PropTypes} from 'react';
import {connect} from 'react-redux';
import {checkDate} from '../actions';
import moment from 'moment';
import DayPickerSection from '../components/DayPickerSection';

const DatepickerCont = ({dates, changeDate}) => {
 return (
 <div classname="my-app">
 <daypickersection selected="{moment(dates)}" changedate="{(date)="> changeDate(moment(date).format('MM/DD/YYYY'))}/>
</daypickersection></div>
);
};

DatepickerCont.propTypes = {
 dates: PropTypes.object
 changeDate: PropTypes.func
};

const mapStateToProps = (state) => {
 return {
 dates: state.dates
};
};

const mapDispatchToProps = (dispatch) => {
 return {
 changeDate: date => dispatch(checkDate(date))
};
};

export default connect(mapStateToProps, mapDispatchToProps)(DatepickerCont);


//reducer

const changeDate = (state = ", action) => {
 switch (action.type) {
 case types.CHANGE_DATE:
 return action.changeDate;
default:
 return state;
}
};
pastebin.com/F92iQCbv - Jacinthe.Turn commented on July 2nd 19 at 18:00
console.log(state) - removes the object with the action, where changeDate is the date I have chosen, that is all fine, but in input, nothing changes. - dannie.Stehr commented on July 2nd 19 at 18:03
: why should it change? if you have an object with a property changeDate, hence "MapIT" you have the dates: state.changeDate - Jacinthe.Turn commented on July 2nd 19 at 18:06
and if you have mappilas to state.dates - where this property "dates" was taken? So I asked "why it should change." In my opinion, you need to pull the basics of JS. So it will be more productive. - dannie.Stehr commented on July 2nd 19 at 18:09
What makes mapDispatchToProps? It turns out you can get one argument (the DatePicker selected={selected}, and also DayPickerSection selected={moment(dates)} ) ? - dannie.Stehr commented on July 2nd 19 at 18:12

Find more questions by tags JavaScriptReactRedux