U
U
uzi_no_uzi2020-05-20 20:54:53
JavaScript
uzi_no_uzi, 2020-05-20 20:54:53

How to call the render of a component if another one is rendered?

There is such a component for date selection.

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>
        )
    }
}


Each component is marked in red in the screenshot

5ec56eb8eb6fb866939090.png

. When the date changes on one, the second component needs to be re-rendered, how can this be done?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question