Recap: What are Props?

• A way to share data and functionality between components
• Always passed down from parent to child component
• Make components configurable and reusable 🎉🎉🎉

Using props

function ParentComponent(props) {
  return (
    <section>

      <ChildComponent name="Eric" />

      <ChildComponent name="Mike" />

      <ChildComponent name="Ellen" />

    </section>
  );
}

function ChildComponent(props) {
  return <div>Hi {props.name}</div>;
}

Demo https://codesandbox.io/s/react-props-38c6e

Why are props not enough?

The receiving [child] component cannot modify the props it was given

This means we can't ever change the way our applications looks 👎👎👎

So how do we make our React apps dynamic?

React State

What is State?

• Allows a component to update itself and its child components
• Whenever state changes, the component will re-render
• Components with state are commonly called "stateful"
• Components without state are "stateless"

Let's build a stateful component

https://codesandbox.io/s/learning-react-state-uyick

What to remember about state

• Define state as a field on the class along with the initial value

class Counter extends React.Component {
  state = { counter: 0 };
  // ...

• Update state by calling this.setState()

this.setState({ counter: newValue });

• Access state by using this.state.nameOfState

<p>Current count: {this.state.counter}</p>

Practice time 🤓

https://codesandbox.io/s/elegant-franklin-4guzx

Can Function Components have State too?

YES! 🏆

• Class components define state as an instance field
• Function components define state using "hooks" - only in React 16.8 or later