SocialPostDates.js

import React from 'react';
import PropTypes from 'prop-types';
import DatePicker from 'react-datepicker';
import moment from 'moment';

class SocialPostDates extends React.Component {

    constructor(props) {
        super(props);
    }


    static propTypes = {
        scheduled_dates: PropTypes.array.isRequired,
        updateScheduledDates: PropTypes.func.isRequired
    };


    componentWillReceiveProps(nextProps) {

        if (nextProps.scheduled_dates.length) {
            console.log(this.props.scheduled_dates);
        }

    };


    updateScheduledDate = (index, date) => {

        const scheduled_dates = [...this.props.scheduled_dates]

        scheduled_dates[index] = date;

        this.props.updateScheduledDates(scheduled_dates);

    };


    removeScheduledDate = (index) => {

        const scheduled_dates = [...this.props.scheduled_dates]

        scheduled_dates.splice(index, 1);

        this.props.updateScheduledDates(scheduled_dates);

    }


    handleChange = (date, index) => {

        this.updateScheduledDate(index, date);

    };


    render() {
        let length = this.props.scheduled_dates.length;

        return (
            <div className="control-group" data-validate-visible="true" data-required="true">
                <label className="control-label">Schedule at</label>

                    {this.props.scheduled_dates.map((date, index) => {

                        let button;

                        if (length === index + 1) {
                            button = (
                                <button type="button" className="icon-btn">
                                    <i className="icon icon--plus"></i>
                                </button>
                            )
                        } else {
                            button = (
                                <button type="button" className="icon-btn"
                                        onClick={(e) => this.removeScheduledDate(index)}>
                                    <i className="icon icon--cross"></i>
                                </button>
                            )
                        };

                        return(
                            <div className="controls" style={{marginBottom: 15 + 'px'}}>
                                <div class="control-row aiir-sp-multischedule__row">
                                    <div class="control-cell  aiir-sp-multischedule__cell">
                                        <div>
                                            <DatePicker
                                                selected={date}
                                                onChange={(e) => this.handleChange(e, index)}
                                                showTimeSelect
                                                timeFormat="HH:mm"
                                                timeIntervals={5}
                                                dateFormat="LLL"
                                                key={index}
                                            />
                                        </div>
                                    </div>

                                    <div className="control-cell  aiir-sp-multischedule__cell">
                                        {button}
                                    </div>
                                </div>
                            </div>
                        )
                    })}

            </div>
        )
    }

}

export default SocialPostDates;