Attach change listeners directly

[eliasmalik]

ReactWeek-Martha-Georgia/src/components/Dropdown.js

Lines 5 to 10 in b9507cf

	React.useEffect(() => {
	const updateCategory = event => setCategory(event.target.value);
	const dropdown = document.querySelector("#Dropdown");
	dropdown.addEventListener("change", updateCategory);
	return () => dropdown.removeEventListener("change", updateCategory);
	}, []);

You can set the change listeners directly on the JSX component, then you don't need to worry about managing listeners manually on mount/unmount.

<select onChange={changeHandler}>
  {...}
</select>

[eliasmalik]

Same thing here:

ReactWeek-Martha-Georgia/src/components/LetsGo.js

Lines 19 to 22 in b9507cf

	<form className="lets-go-form">
	<input placeholder="Enter a username" className="usernameInput" type="text" />
	<button className="letsGoButton">Let's Go</button>
	</form>

You can attach the change listener to the enclosing form element and it'll let you handle the changes of all child input elements if that's better for your use case too.

<form onChange={changeHandler} onSubmit={submitHandler}>
  <input type="text" name="name" />
  {...}
</form>