Как исправить ошибку «Objects are not valid as a React child»?

Question

[Ксения]

В учебных целях я работаю над приложением бронирования. Использую Redux.
В принципе всё работает хорошо, кроме передачи объекта Date. Выдаёт ошибку:

Error: Objects are not valid as a React child (found: Sat Nov 09 2019 16:09:32 GMT+0500 (Yekaterinburg Standard Time)). If you meant to render a collection of children, use an array instead.

Я понимаю, что нельзя передать объект Date. Я попробовала привести его к строке в reducer'е:

const initialState = {
  date: new Date().toString()   (или date: new Date().toDateString())
  }

На некоторых страницах отображение даты работает как я хотела, но на странице выбора даты выдаёт ошибку: RangeError: Invalid time value

На странице выбора даты я использую React DatePicker:

selected={this.props.date}
locale="ru"
onChange={(day) => {this.props.setDate(day)}}
inline />
Куда нужно добавить toString(), чтобы при выборе даты в календарь, объект Date был строкой и моё приложение работало?

Answer 1

[Алексей Уколов]

Я понимаю, что нельзя передать объект Date.

Передать можно, нельзя отрендерить. Соответственно, и к строке приводить нужно там, где рендерите.

Comments

[Ксения]

Я рискнула сделать так, но не вышло:

render() {

       let time = this.props.date;
          
        return (
       
            <DatePicker
        selected={time.toString()}
        locale="ru"
        inline  />
)
}

[Maksimka]

Ксения, в редакс храните объект даты, в дата пикер кидайте его без изменений, а если захотите отрендерить, то там и приводите к строке.

[Ксения]

MaksKharovsk, спасибо!