Bviveksingh

const setDifficulty = (value: number) => {
   setDifficultyLevel(value);
   setDisplayVal(paragraphs[value]); /*----THIS LINE SETS THE DISPLAY VALUE (STRING) ----*/
}

Bviveksingh

const [displayVal, setDisplayVal] = useState<string>('');

Bviveksingh

const computeResult = () => {
   const result = (inputVal.length / 5) / minutes;
   const percentage = (((inputVal.length - incorrectEntry) / inputVal.length) * 100).toFixed(2);
   setWordsPerMin(result);
   setAccuracy(parseFloat(percentage));
}

Bviveksingh

const displayResult = () => {
    return(
         <div>
             <p>The words per minute written: {wordsPerMin}</p>
             <p>Percentage Accuracy: {accuracy}%</p>
         </div>
    )
};

Bviveksingh

{endTimer && displayResult()}

Bviveksingh

const resetTest = () => {
  setEndTimer(false);
  setInputVal('');
  setInpBoxSplit([]);
  setWordsPerMin(undefined);
  setAccuracy(0);
  setDifficultyLevel(undefined);
  setIncorrectEntry(0);
  setTimeInSeconds(0);
  setElegibleToStart(false);

Bviveksingh

{inputVal.length > 0 && <button onClick={() => resetTest()}>Reset</button>} 

Bviveksingh

{!endTimer && eligibleToStart && <InputBox value={inputVal} onChange={(e) => setInputVal(e.target.value)}/>}

Bviveksingh

{paragraphArr.length > 0 && <Paragraph value={paragraphArr.length > 0 ? paragraphArr : [] }/>}  

Bviveksingh

const setDifficulty = (value: number) => {
    setDifficultyLevel(value);
    setDisplayVal(paragraphs[value]);
}