Имеется такой компонент для выборки даты.
class DatePickerBtn extends React.Component {
constructor() {
super();
this.state = {
startDate: new Date("2014/02/2"),
endDate: new Date("2014/02/10"),
}
}
setStartDate(date) {
this.setState({
startDate: date,
})
}
setEndDate(date) {
this.setState({
endDate: date,
})
}
render() {
const CustomInput = ({ value, onClick }) => (
<div className="date-picker-btn" onClick={onClick}>
<div className="date-picker-btn__icon-wrap">
<svg className="date-picker-btn__date-icon">
<use xlinkHref='#calendar' />
</svg>
</div>
<div className="date-picker-btn__value">
{value}
</div>
<svg className="date-picker-btn__drop-icon">
<use xlinkHref='#arrow-top' />
</svg>
</div>
);
console.log(this.props.selectsStart, this.props.selectsEnd)
let picker = '';
if(this.props.selectsStart) {
picker = <DatePicker
selectsStart
selected={this.props.selectsStart ? this.state.startDate : this.state.endDate}
onChange={this.props.selectsStart ? date => this.setStartDate(date) : date => this.setEndDate(date)}
customInput={<CustomInput />}
startDate={this.state.startDate}
endDate={this.state.endDate}
/>
} else {
picker = <DatePicker
selectsEnd
selected={this.props.selectsStart ? this.state.startDate : this.state.endDate}
onChange={this.props.selectsStart ? date => this.setStartDate(date) : date => this.setEndDate(date)}
customInput={<CustomInput />}
startDate={this.state.startDate}
endDate={this.state.endDate}
minDate={this.state.startDate}
/>
}
return(
<div>{picker}</div>
)
}
}
Каждый компонент отмечен красным на скриншоте
Когда меняется дата на одном, нужно перерендерить и второй компонент, как это можно сделать?