I am trying to put input data into a variable from within a component, and I want to use that variable to pass it through a function within my main.js file. The function puts random letter into an interval, I already have it working with a button, but I would like users to be able to input their own letters. I already have the input data being rendered on the page using state, however, I do not know how to convert that data into a variable and use it on another page. Thanks for the help everyone!
This is my input component:
import "./Input.css";
import React, { useState } from "react";
function Input(props) {
const [data, setData] = useState(null);
function getData(e) {
setData(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
}
return (
<div>
<h1>Your custom letter set: {data} </h1>
<form onSubmit={handleSubmit}>
<input onChange={getData} className="inputField" type="text" placeholder="Enter letters here, separate by commas" />
<button onClick={props.click4} value="Start">
Start
</button>
</form>
</div>
);
}
export default Input;
This is my main JS file:
import React, { useState } from "react";
import "./App.css";
import Chalkboard from "./chalkboard/chalkboard";
import StartStop from "./startStopButtons/startStopButtons";
import LevelBoxes from "./levelBoxes/levelBoxes";
import Input from "./Inputs/Input";
function App() {
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);
};
// function that sets certain letters into interval
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);
}
//Here I would like to use the Var to insert into function like so
const inputData = () => {
var inputDataInput;
getRandom(inputDataInput);
};
}
return (
<div className="App">
<h1>Letter Interval Application</h1>
<Chalkboard click={myFunction} />
<Input clickStart={startFunction} click4={inputData} />
<LevelBoxes clickStart={startFunction} />
<StartStop clickStop={stopButton} />
</div>
);
}
export default App;