DOM manipulation

[oliverjam]

expelliarmus/src/components/githubUser.js

Lines 6 to 11 in 916ed49

	<li
	onClick={event => {
	setUser({ login, avatar_url });
	event.target.classList.add("user-selected");
	}}
	>

Manually updating the DOM isn't very Reacty. JSX lets us conditionally set properties on elements, which means we can achieve this in a more declarative way:

<li
  className={user === login ? "user-selected" : null}
  onClick={event => {
    setUser({ login, avatar_url });
  }}
>

You would need to pass down the user as a prop in order to know that the state has changed though.

Oh also clickable things should probs be buttons, so you don't have to implement your own focus and keyboard handling 🙃