Объекты недействительны в качестве дочернего элемента React

Я получаю ошибку ниже. Я вижу, что мне нужно вернуть массив вместо объекта. Но я действительно не уверен, как это исправить. Спасибо заранее

Объекты недействительны в качестве дочернего элемента React. Если вы хотели сбор детей, используйте массив или оберните объект, используя createFragment (объект) из надстроек React. Проверьте метод рендеринга View.

constructor(props){
    super(props);
    this.state = {timeElapsed: null};
  }

startStopButton(){
    return <TouchableHighlight underlayColor="gray" onPress={this.handleStartPress.bind(this)}>
        <Text>Start</Text>
      </TouchableHighlight>
  }

handleStartPress(){
      var startTime = new Date();




      setInterval(()=>{
        this.setState({timeElapsed: new Date()})
      }, 1000);
  }
render(){
return(
  <View style={styles.container}>
    <View style={[styles.header]}>
      <View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
        {this.state.timeElapsed}
      </View>
      <View style={[styles.buttonsContainer, this.borderColor('#558000')]}>
        {this.startStopButton()}
        {this.lapButton()}
      </View>
    </View>
  </View>
);


}

Ответы

Ответ 1

timeElapsed - это объект, React не знает, как это сделать:

  <View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
    {this.state.timeElapsed}
  </View>

Попробуйте изменить this.state.timeElapsed для строки, например, например:

  <View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
    {this.state.timeElapsed.toString()}
  </View>