# Working with Props
- props is a special object that is passed to components by default
- props are accessed differently in stateful and stateless components
- in stateful, use {this.props.name}
- in stateless, use {props.name}
- a special prop, children allows us to access any element between the opening and closing tags of a component
## In Main Component
### Code Example
```
import React, {Component} from 'react';
class App extends Component {
render() {
return (
<div>
// passing attributes (i.e. props) to the person component
<Person name="Brad" age="22" />
// passing data between the opening and closing tags of a component i.e. children
<Person name="Eleanor" age="21">My hobbies include make-up and animals</Person>
</div>
);
}
}
export default App;
```
## In Secondary Component
- secondary component will output:
- 1st person component: "Hi! Im Brad and Im 22 years old"
- 2nd person component: "Hi! Im Eleanor and Im 21 years old" "My hobbies involve make-up and animals"
- if no props.children exists then no output will render for that paragraph
### Code Example
```
import React from 'react';
const person = (props) => {
return (
<p>Hi! Im {props.name} and Im {props.age} years old</p>
<p>{props.children}</p>
);
}
export default App;
```