Components And Props

https://teamtreehouse.com/library/react-basics-2/introducing-props/components-and-props

Components and Props

An important detail to remember about props is that they are “read only” (or immutable), which means that a component can only read the props given to it, never change them. The (parent) component higher in the tree owns and controls the property values.

For example, if you try to set or change a prop value like this:

const Header = (props) => {

  return (
    <header>
      <h1>{ props.title = 'Fun Board' }</h1>
    </header>
  );
}

React will throw the error: // Cannot assign to read only property 'title' of object.

As stated in the React docs:

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

That way you avoid unintended behavior (or side effects) in your components. Further, React components are similar to “pure” functions in JavaScript. They do not attempt to change their inputs, and always return the same result for the same inputs.

Prop Tips

When a component has more than one prop, you’ll often see them written on separate lines and indented, like so:

<Header   title="My Scoreboard"   totalPlayers={5}  isFun={true}/>

You can omit the value of a prop when it’s explicitly true:

<Header   title="My Scoreboard"   totalPlayers={5}  isFun/>

Use double quotes (“) when writing props. HTML attributes commonly use double quotes instead of single, so props mirror this convention:

<Player   name="Guil H"  team="Treehouse"/>

Ok, I got it