Всем доброго дня. У меня есть данные, которые берутся из обновляемого стейта и записываются в пропсы другой компоненты на этой же странице. Вот компонента, которая принимает данные и тут же их отображает в диве на этой же странице.
<OrderDate
value={this.state.date.toDateString()}
time={this.state.time}
/>
Вот данные, которые приходят в нее.
<p>{this.props.value + ' ' + this.props.time}</p>
Все работает и отображается. После этого я нажимаю кнопку продолжить, перехожу на следующую страницу, там тоже есть див с этой же компонентой, но в ней уже значения undefined undefined. Вот как она выглядит внутри следующей страницы
<OrderDate value={this.props.date}
time={this.props.time}/>
Что я делаю не так и почему данные не остаются?
class Order extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
time: '',
morningTime: ['10-00', '10-30', '11-00', '11-30'],
dayTime: ['12-00', '12-30', '13-00', '13-30', '14-00', '14-30', '15-00', '15-30', '16-00', '16-30'],
eveningTime: ['17-00', '17-30', '18-00', '18-30', '19-00', '19-30', '20-00'],
}
}
onClick = (event) => {
this.setState({time: event.target.innerText})
};
onChange = date => this.setState({ date });
render() {
return(<div>
<Header/>
<div className={styles.bodyContainer}>
<Link to="/onlineRegistration/ourServices/nails">
<p className={styles.back}>< Назад</p>
</Link>
<h3>Расписание</h3>
<div className={styles.calendarContainer}>
<Calendar
className={styles.calendar}
onChange={this.onChange}
value={this.state.date}
/>
<OrderDate
value={this.state.date.toDateString()}
time={this.state.time}
address={'http://localhost:3000/orderInfoClient'}
/>
</div>
<div className={styles.time}>
<div className={styles.morning}>
<p className={styles.dayTime}>Утро</p>
{this.state.morningTime.map((time, i) => (
<button key={i} value={this.state.time} onClick={this.onClick}>
{time}
</button>
))}
</div>
<div className={styles.day}>
<p className={styles.dayTime}>День</p>
{this.state.dayTime.map((time, i) => (
<button key={i} value={this.state.time} onClick={this.onClick}>
{time}
</button>
))}
</div>
<div className={styles.evening}>
<p className={styles.dayTime}>Вечер</p>
{this.state.eveningTime.map((time, i) => (
<button key={i} value={this.state.time} onClick={this.onClick}>
{time}
</button>
))}
</div>
</div>
</div>
<Footer/>)
}
}
export default Order;
</div>