Update Props Guide to Include a Working Example (#32683)

This commit is contained in:
KurtWayn3
2019-02-17 10:45:44 -07:00
committed by Paul Gamble
parent 23d6381828
commit e6143c7cf5

View File

@ -2,4 +2,38 @@
title: Props
---
### What are the props?
Props (short for properties) are the data or functions passed into a component. They are immutable (read-only).
Props (short for properties) are the data or functions passed into a component. They are immutable (read-only).
To illustrate how props are used in components, see the following example:
```javascript
const props = {
name: "john",
age: 33,
country: "Canada"
};
const PropTest = (props) => {
return(
<div
name={props.name}
age={props.age}
country={props.country}>
<ul>
<li>name={props.name}</li>
<li>age={props.age}</li>
<li>country={props.country}</li>
</ul>
</div>
);
};
ReactDOM.render(
<div>
<PropTest {...props}/>
</div>
, mountNode
);
```
The props are created in the props constant object and then used as inputs in the component and then passed and rendered in the ReactDOM.