Received NaN for the `children` attribute in React-CodePudding

I am new in React and I am building a type racer app. I am at this stage where I want to calculate to WPM (Words per minute) but for some reason the calculation returns 'NaN'. I have checked, each variable has the correct value and there are no empty values at the time of calculation.

Some pictures:

And here is the code for the App.js:

import React from 'react';
import { useState, useEffect } from 'react';
import './App.css';
import getTime from './CurrentTime.js';




const App = () => {

const [typeracertext, setTyperacertext] = useState("My name is Ruslan. ");
const [userText, setUserText] = useState("");
const [wholeText, setWholeText] = useState("");
const [startTyping, setStartTyping] = useState("");
const [endTyping, setEndTyping] = useState("");
var [countWords, setCountWords] = useState(0);

const wordsPerMinute = (startTime, endTime, words) => {
    return 60 / ({endTime} - {startTime}) * words
}


const onChange = (e) => {
    if (wholeText === "")
    {
        setStartTyping(getTime.getTime);
    }
    if (typeracertext.substring(0, wholeText.length 1).slice(-1) === e.target.value.slice(-1))
    {  
        setUserText(e.target.value);
        e.target.style.color = 'black';
        if (typeracertext.substring(0, wholeText.length 1).slice(-1) === " ")
        {
             e.target.value = "";
             setWholeText(wholeText   " ");
             setCountWords(countWords   1);
        }  

        else
        {
            setWholeText(wholeText   ((e.target.value).slice(-1)));
        }
    }

    else
    {
        e.target.style.color = 'red';
    }

    if (wholeText === typeracertext.substring(0, typeracertext.length-2))
    {
        setEndTyping(getTime.getTime);
        e.target.value = "";
    }
};

return (
    <div className="wrapper">
        <div className="box c">
        <span className="userText">{wholeText}</span>{typeracertext.substring(wholeText.length, typeracertext.length)}

        {endTyping != "" &&
        <span className="wpmUser">{wordsPerMinute(startTyping, endTyping, countWords)}</span>}

);
}

export default App;

and the code for CurrentTime.js

import React from 'react';

const getTime = () => {
    const current = new Date();
      return(current.getHours()*60*60   current.getMinutes()*60   current.getSeconds());  
}

export default {getTime};

EDIT: Here are also a proof that the values were passed:

CodePudding user response：

You are not calling gettime in your set state. You are only pointing towards it

setStartTyping(getTime.getTime())

and

setEndTyping(getTime.getTime())

And why starttime and endtime are wrapped in {}. They are plain numbers. Maybe you can do directly

const wordsPerMinute = (startTime, endTime, words) => {
    return 60 / (endTime - startTime) * words
}