state-and-event-handling

[tildeee]

No description provided.

[anselrognlie]

comments for event handling
preview branch with suggestions applied at: https://github.com/Ada-Developers-Academy/core-unit-3/tree/ar/state-and-event-handling

[anselrognlie]

I think this conveys the intent with a bit more clarity

Suggested change

	Our React web apps are more fulfilling when they handle user events. To handle events in React, we must learn the React conventions.
	Our React web apps become more capable when they handle user events. To handle events in React, we must learn the React conventions.

[anselrognlie]

current phrasing could be read as meaning we assign the element to its own attribute, which is a little odd

Suggested change

	For any element to listen to an event, we set an attribute to the element.
	For any element to listen to an event, we set an attribute on the element.

[anselrognlie]

I read <input> the same as "input", that is with an initial vowel, so I prefer "an"

Suggested change

	When submitting a form, for submit events, we set the `onSubmit` attribute. To handle when a `<input type="text">` element changes, we set the `onChange` attribute.
	When submitting a form, for submit events, we set the `onSubmit` attribute. To handle when an `<input type="text">` element changes, we set the `onChange` attribute.

[anselrognlie]

spacing and ;

Suggested change

	const Post = () => {
	const printMessage = () => {
	console.log('Hello! We\'re in printMessage!');
	}
	return (<section>
	<button onClick={printMessage}>Like</button>
	</section>)
	}
	const Post = () => {
	const printMessage = () => {
	console.log('Hello! We\'re in printMessage!');
	};
	return (
	<section>
	<button onClick={printMessage}>Like</button>
	</section>
	);
	};

[anselrognlie]

update caption

Suggested change

	_Fig. An app with a "like" button, and browser Dev Tools that read "Hello! We're in printMessage!" in the console._
	_Fig. Clicking the Like button calls `printMessage`, with our message appearing in the console_

[anselrognlie]

spacing and ;

Suggested change

	const Post = () => {
	const printName = (name) => {
	console.log('We\'re in printName!');
	console.log(`Hello, ${name}!`);
	}
	const printMessage = () => {
	printName('Ada Lovelace');
	console.log('Now, we\'re in printMessage!');
	}
	return (<section>
	<button onClick={printMessage}>Like</button>
	</section>)
	}
	const Post = () => {
	const printName = (name) => {
	console.log('We\'re in printName!');
	console.log(`Hello, ${name}!`);
	};
	const printMessage = () => {
	printName('Ada Lovelace');
	console.log('Now, we\'re in printMessage!');
	};
	return (
	<section>
	<button onClick={printMessage}>Like</button>
	</section>
	);
	};

[anselrognlie]

spacing and ;

Suggested change

	const Post = () => {
	const printName = (name) => {
	console.log('We\'re in printName!');
	console.log(`Hello, ${name}!`);
	}
	return (<section>
	<button onClick={() => printName('Ada Lovelace')}>Like</button>
	</section>)
	}
	const Post = () => {
	const printName = (name) => {
	console.log('We\'re in printName!');
	console.log(`Hello, ${name}!`);
	};
	return (
	<section>
	<button onClick={() => printName('Ada Lovelace')}>Like</button>
	</section>
	);
	};

[anselrognlie]

I don't think this is clear about the pattern. Let's be a little more explicit and warn about a common error students run into.

Suggested change

	This is a common pattern in React code.
	Using anonymous functions for event handlers is a common pattern in React, especially when the function we want to call needs us to pass in some parameters.
	A common mistake when trying to call a function that takes an argument as an event handler is to try to write the function call, in this case `printName('Ada Lovelace')`, directly as the even handler.
	But this does not have the desired result! Instead, it:
	1. Calls `printName('Ada Lovelace')` as the button is being rendered rather than when it is clicked. This causes the output message to appear while the page is still being rendered. Not what we wanted!
	1. Sets the _result_ of calling `printName('Ada Lovelace')` as the click handler. Since `printName` returns nothing, the result is `undefined`. So no event handler is registered for `onClick`, and the button does nothing when it is clicked. Also not what we wanted!

[anselrognlie]

expand this part of the explanation too. recognize this pattern works well in some situations, but named functions still work better in others.

Suggested change

	When our event handler has at least one parameter, we can use this technique.
	So when our desired behavior takes at least one parameter, we can use this technique of wrapping it in an anonymous function.
	An anonymous function lets us call arbitrary code exactly where the event registration occurs, which can be good for understandability. But we may find that, if we need to do more than one or two things in the event handler, then using a named function may still be more understandable.

[anselrognlie]

comments for using state
updated preview branch with suggestions applied at: https://github.com/Ada-Developers-Academy/core-unit-3/tree/ar/state-and-event-handling

[anselrognlie]

Aside: I love the thought of the different reactions folx could have to this statement depending on whether their default frame of reference is Fahrenheit or Celsius! Either "brrr, that's cold" or "ugh, that's warm!"

[tildeee]

I'm really really really glad you picked up on this 😂 😂 😂 !!!

[anselrognlie]

This has to be done carefully and with great intention, or else it can become an anti-pattern: https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e

The question is why would we bother storing this in state when the value is already available in props? And once we divorce the value from the props by putting it in state, we run the risk of any prop changes not being reflected in the state (since it will only initialize once). To get around this, we would need to register a dependency on the particular prop value to update the state when the prop changes. But if we do that, we might as well simply read from the prop the whole time.

Now maybe this is OK (say the prop value indicates some range and we need to some some pre-calculation over the range and store the result in state, then register an effect to run if the prop updates), but in general, if we find ourselves tempted to initialize state from props, we should double check, and think about it again, and then probably not do that.

[anselrognlie]

Offline discussion resulted in decision to cut this callout

[anselrognlie]

a little more detail about how react renders things

Suggested change

	React is known for rendering UI really quickly! Under the hood, React achieves its speed by detecting changes in state, and re-rendering the component.
	React is known for rendering UI really quickly! Under the hood, React achieves its speed by detecting changes in state, and re-rendering only those components that depend on that state.

[anselrognlie]

explicitly mention that its a reference
existing phrasing could sound like getting the function itself is what causes the update

Suggested change

	1. In index `1`, there is a _function_ that updates that piece of state
	1. In index `1`, there is a _reference to a function_ for updating that piece of state

[anselrognlie]

typo

Suggested change

	Imagine a social media web app that has a list of posts. Each `Post` component that needs to display the number of likes it has.
	Imagine a social media web app that has a list of posts. Each `Post` component needs to display the number of likes it has.

[anselrognlie]

quotes, spacing and ;

Suggested change

	import { useState } from "react";
	const Post = () => {
	const [likesCount, setLikesCount] = useState(0);
	return (<section>
	<p>What is the number of likes we should display? {likesCount}</p>
	</section>)
	}
	import { useState } from 'react';
	const Post = () => {
	const [likesCount, setLikesCount] = useState(0);
	return (
	<section>
	<p>What is the number of likes we should display? {likesCount}</p>
	</section>
	);
	};

[anselrognlie]

add caption

Suggested change

	
	
	_Fig. The `Post` component can use its state like any other variable_

[anselrognlie]

cut this per offline discussion

Suggested change

	### !callout-info
	## Getting the Initial Value From Props
	Instead of passing in a string literal to `useState`, what would happen if we passed in a variable?
	<br/>
	Sometimes, we'll get the initial value of state through _`props`_! Consider:
	```
	const SomeComponent = (props) => {
	const [pieceOfState, setPieceOfState] = useState(this.props.initialPieceOfState);
	}
	SomeComponent.propTypes = {
	initialPieceOfState: PropTypes.string.isRequired
	};
	```
	In this example, `SomeComponent` requires a `prop` named `initialPieceOfState`. We read this property with `this.props.initialPieceOfState` and pass it into `useState`.
	### !end-callout

[anselrognlie]

rephrase so to make it clear that these benefits are not something we're necessarily going to notice right now

Suggested change

This lesson teaches managing state using React hooks. Both are valid ways to manage state. Using React hooks is considered better practice because it improves the ability to create independent, clean components. If we're curious, we can [read more about the motivation to use hooks in the official React docs](https://reactjs.org/docs/hooks-intro.html#motivation) anytime.

This lesson teaches managing state using React hooks. Both are valid ways to manage state. Using React hooks is considered better practice because this method is designed to improve our long-term ability to create independent, clean components. If we're curious, we can [read more about the motivation to use hooks in the official React docs](https://reactjs.org/docs/hooks-intro.html#motivation) anytime.

[anselrognlie]

comments for updating state
updated preview branch with suggestion applied at: https://github.com/Ada-Developers-Academy/core-unit-3/tree/ar/state-and-event-handling

[anselrognlie]

completes review
updated preview branch with suggestion applied at: https://github.com/Ada-Developers-Academy/core-unit-3/tree/ar/state-and-event-handling