Extra spaces in JSX

[oliverjam]

Week10TT/src/App.js

Lines 38 to 41 in 91f8cac

	<div className="Container">
	{" "}
	<SnakeGrid face={userData.avatar_url} />
	</div>

You can probably delete any random extra spaces like this (the {" "}).

This is a weird thing that happens with Prettier that I thought I'd clarify. JSX differs slightly from HTML in how it handles whitespace. HTML is totally whitespace-sensitive (as in spaces in your code between inline elements will cause an actual space to appear on the page). JSX is whitespace-sensitive between elements but not at the end of a line.

When this combines with Prettier aggressively putting things on new lines when the line gets too long you have a problem. E.g. if you have

<span>Some stuff</span> <button>Other</button>

(with a space in the middle) if Prettier moved the button onto a new line that could potentially change your page layout (since the space would disappear). To ensure it doesn't break anything Prettier preserves the space by making it a JS string, using curly brackets and quotes. This forces React to keep it there.

tl;dr you can probs delete these unless you're using spaces to layout your HTML elements 🙃

[trishtracking]

thanks! yeh I couldn't figure that out this morning 😅