{"size": 664, "ext": "js", "max_stars_repo_path": "src/components/LetterInput.js", "max_stars_repo_name": "hutch888/metadictionary", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/LetterInput.js", "max_issues_repo_name": "hutch888/metadictionary", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/LetterInput.js", "max_forks_repo_name": "hutch888/metadictionary", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.4193548387, "max_line_length": 68, "alphanum_fraction": 0.6370481928}
import { useState, useEffect } from "react";

export default function LetterInput(props) {
	const { position, updateSearchString, wordLength, clear } = props;

	const [inputValue, setInputValue] = useState("");

	function changeLetter(event) {
		event.preventDefault();
		let newLetter = event.target.value;
		setInputValue(event.target.value);
		updateSearchString(position, newLetter);
	}

	useEffect(() => {
		setInputValue("");
	}, [wordLength, clear]);

	return (
		<div className="p-1 m-1 item-hl">
			<input
				type="text"
				size="1"
				maxLength="1"
				value={inputValue}
				onChange={changeLetter}
			/>
		</div>
	);
}
