Всем доброго дня. Помогите пожалуйста. Создаю страницу, на которой пользователь выбирает день и время записи на прием. У меня есть кнопки со временем, при клике на них должны передаваться props времени в другую компоненту, но вместо этого пишет object object. Вот мой код:
class Order extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
time: '',
}
}
onClick = time => this.setState({ time });
onChange = date => this.setState({ date });
render() {
return(<div>
<Header/>
<div className={styles.bodyContainer}>
<p className={styles.back}>< Назад</p>
<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}/>
</div>
<div className={styles.time}>
<div className={styles.morning}>
<p>Утро</p>
<button time={this.state.time} onClick={this.onClick}>10-00</button>
<button time={this.state.time} onClick={this.onClick}>10-30</button>
<button>11-00</button>
<button>11-30</button>
</div>
<div className={styles.day}>
<p>День</p>
<button>12-00</button>
<button>12-30</button>
<button>13-00</button>
<button>13-30</button>
<button>14-00</button>
<button>14-30</button>
<button>15-00</button>
<button>15-30</button>
<button>16-00</button>
<button>16-30</button>
</div>
<div className={styles.evening}>
<p>Вечер</p>
<button>17-00</button>
<button>17-30</button>
<button>18-00</button>
<button>18-30</button>
<button>19-00</button>
</div>
</div>
</div>
<Footer/>
</div>)
}
}
Не передается time в компоненту OrderDate, значение value(дата из календаря) передается и все работает.
Вот код из компоненты OrderDate:
class OrderDate extends Component {
jump(){
window.location.assign('http://localhost:3000/orderInfoClient');
}
render() {
return(<div className={styles.orderDate}>
<div className={styles.info}>
<div className={styles.priceService}>
Здесь будут цены и услуги
</div>
<div className={styles.adress}>
<p>{this.props.value + ' ' + this.props.time}</p>
<p>Санкт-Петербург, Россия</p>
<p>191002</p>
<button onClick={() => this.jump()}>Продолжить</button>
</div>
</div>
</div>)
}
}
export default OrderDate;
Я понимаю, что скорее всего проблема кроется в том, что на входе у меня строка, и мне нужно преобразовать эти данные в другой формат, но я не понимаю в какой и как. Потому что функция toTimeString(), после time={this.state.time} в компоненте OrderDate не работает, а если быть точнее мне выдает ошибку, что это не функция.