I am building a letter interval application. Basically, I want users to be able to type in letters within an input element, and have that data be used in a function that ive built and then have that data rendered in an intervel. I have the user data rendering on the screen in a H1 tag no problem, whoever, I am having trouble inserting the user data into the interval function which ultimately renders interval letters on the screen. Any help will be greatly appreciated!!
This is the code:
import React, { useState } from "react";
import Chalkboard from "../chalkboard/chalkboard";
import StartStop from "../startStopButtons/startStopButtons";
function IntervalFunction() {
var _timer;
var vowels = "aeiouy".split("");
// Function that starts the letter interval
const startFunction = () => {
var allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
getRandom(allLetters);
};
// Stops startFunction
const stopButton = () => {
clearTimeout(_timer);
clearTimeout(getRandom);
};
// letter interval function
function getRandom(letters) {
var randomSet = letters[Math.floor(Math.random() * letters.length)];
console.log("set random", randomSet);
document.getElementById("demo3").innerHTML = randomSet;
_timer = setTimeout(() => getRandom(letters), 1000);
}
//state function that renders user input on screen
const [data, setData] = useState(null);
function getData(e) {
setData(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
}
//function that grabs user input and insert into function
const inputValue = () => {
var userSet = { getData };
getRandom(userSet);
};
return (
<div>
<h1>Letter Interval Application</h1>
<Chalkboard />
<h1>Your custom letter set:</h1>
<h1>{data}</h1>
<form onSubmit={handleSubmit}>
<input onChange={getData} className="inputField" type="text" placeholder="Enter letters here, separate by commas" />
<button onClick={startFunction} onClick={inputValue} value="Start">
Start
</button>
</form>
<StartStop clickStop={stopButton} />
</div>
);
}
export default IntervalFunction;
Thanks so much for reading.