Props in React

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".

<Welcome name="Sarah" />;

We can then utilize this prop like so:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Why is this useful? Let's say our Welcome component was a bit more complicated. It has some styling and some HTML organization. Now, we want to say "welcome" to ten different people. We don't want to have to re-write this chunk of code for every person. We want to just be able to write:

function WelcomeList(props) {
  return (
            <div>
              <Welcome name="Sarah" />
              <Welcome name="Sariah" />
              <Welcome name="Dakota" />
              <Welcome name="Eric" />
              <Welcome name="Aaron" />
              <Welcome name="Bob" />
              <Welcome name="Rob" />
              <Welcome name="Missy Elliot" />
              <Welcome name="Katrina" />
            </div
         );
}

This is incredibly useful. We can build an incredibly dynamic component in one file, and then pass it variables. When we look at our Welcome list, we know exactly what we will see, but we don't have to look at all the repetitive stuff!

Brainstorm when you might use this.

Could I just have an array of names and then loop through to create my list? Yes! We will talk about that here

Props in a class based component

Let's see a basic example of props being passed to a class based component.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:

function sum(a, b) {
  return a + b;
}

Such functions are called "pure" because they do not attempt to change their inputs, and always return the same result for the same inputs.

In contrast, this function is impure because it changes its own input:

function withdraw(account, amount) {
  account.total -= amount;
}

React is pretty flexible but it has a single strict rule:

All React components must act like pure functions with respect to their props.

Of course we need to change our data. Next, we will learn about state. Here