How can I solve 'Functions are not valid as a React child.' error?

Question

Here is the function I'm calling below:

const timerDisplay = () => {
        for (var i = 0; i < numbers.length; i++) {
          return (
            <Text>{numbers[i]}</Text>
          )
        }
 }

Calling:

<View style={styles.timerTop}>
        <Text style={styles.textTopBot}>{timerDisplay}</Text>
      </View>

So, when I refresh the project it gets me the 'Functions are not valid as a React child'. How can I solve this?

Answer 1

尝试使用这个关键字

{timerDisplay} --> {this.timerDisplay}

Answer 2

<View style={styles.timerTop}>
    <View style={styles.textTopBot}>
      {numbers.map((number) => <Text>{number}</Text>)}
    </View>
</View>

Answer 3

Assuming you are using class component.

//the function

timerDisplay = () => {
            for (var i = 0; i < numbers.length; i++) {
              return (
                <Text>{numbers[i]}</Text>
              )
            }
     }

//call the function

<View style={styles.timerTop}>
  <Text style={styles.textTopBot}>{this.timerDisplay}</Text>
</View>