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

Question

[MSGroup]

Имеется следующий код:

const initialState = {
  startDate: null,
  endDate: null,
  focusedInput: null,
}

function reducer(state, action) {
  switch (action.type) {
    case 'focusChange':
      return {...state, focusedInput: action.payload}
    case 'dateChange':
      return action.payload
    default:
      throw new Error()
  }
}

function DateTimePicker1() {
  const [state, dispatch] = useReducer(reducer, initialState)



    return (
        <div>
            <DateRangeInput
              onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
              onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
              startDate={state.startDate} // Date or null
              endDate={state.endDate} // Date or null
              focusedInput={state.focusedInput} // START_DATE, END_DATE or null
            />
            <h1>endDate={state.endDate}</h1>

        </div>
  )
}

export default DateTimePicker1;

Вся проблема заключается в выводе <h1>endDate={state.endDate}</h1>. Я совсем новичок в этом, и никак не могу понять, что тут не так.

Comments

[n1ksON]

У вас endDate становится объектом. А React не может отобразить объект. Просто посмотрите через console.log(state.endDate) чему у вас он равен

[MSGroup]

n1ksON, Спасибо, увидел. А не подскажете как передать {state.endDate} - в другой JS. Как я понимаю необходимо использовать "this", но нет понимания логики как это должно быть.

[n1ksON]

MSGroup, используйте props

[MSGroup]

n1ksON, а можете накидать пример, как это должно выглядеть?

[n1ksON]

MSGroup, ну это совсем основы. Документацию откройте