#### Table of Contents
- [[#React props]]
- [[#How to use props in a component]]
- [[#Props are read-only]]
- [[#Prop Tips]]
## React props
Props are a core concept in React because it's how you get data into a component.
- Props are a list of properties used to pass data to a component.
- Components are customized and made reusable with props.
- We pass data down from parents to children via props.
- Each instantiation of a component gets its own props object.
- We add values to the props object via JSX attributes.
- Props are *read-only*
Props are passed to components via HTML attributes.
```jsx
// Add a "brand" attribute to the Car element
const myElement = <Car brand="Ford" />
```
The component receives the argument as a `props` object:
```jsx
// Use the brand attribute in the component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>
}
```
### How to use props in a component:
To use props: *Define in the tag, enable use in the component*
1. Define and set the props in a component's JSX tag at the place where the tag is used
```jsx
<Header title="Scoreboard" totalPlayers={1} />
```
2. Enable the use of props in a component: When you define a component using a function, the function gets one default argument from React: a props object containing a list of props given to the component:
```jsx
const Header = (props) => {
return (
<header>
<h1>{props.title}</h1>
<span>Players: {props.totalPlayers}</span>
</header>
);
};
```
## Passing Data
Props are also how you pass data from one component to another. Props pass data down from a parent component to a child component.
In the `Garage` component, data is passed down to the `Car` component via the `brand` prop, which is then consumed by `Car` and displayed as content.
```jsx
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
```
## Props are read-only
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:
```jsx
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:
```jsx
<Header
title="My Scoreboard"
totalPlayers={5}
isFun={true}
/>
```
You can omit the value of a prop when it's explicitly true:
```jsx
<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:
```jsx
<Player
name="Guil H"
team="Treehouse"
/>
```
___
**Tags**: #react #props