-
Notifications
You must be signed in to change notification settings - Fork 0
/
StateProps.jsx
48 lines (46 loc) · 1.25 KB
/
StateProps.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
* State and Props
* Here, we combine state and props in your app. We are setting the state in our parent component
* and passing it down the component tree using props. Inside render function, we are setting
* headerProp and contentProp used in child components.
*
* Source of data is now coming from the state. When we want to update it, we just need
* to update the state, and all child components will be updated.
*/
import React from 'react';
class StateProps extends React.Component {
constructor (props) {
super(props);
this.state = {
header: "Header from props...",
content: "Content from prop..."
}
}
render () {
return (
<div>
<Header headerProp = { this.state.header } />
<Content contentProp = { this.state.content } />
</div>
);
}
}
class Header extends React.Component {
render () {
return (
<div>
<h1>{ this.props.headerProp }</h1>
</div>
);
}
}
class Content extends React.Component {
render () {
return (
<div>
<h2>{ this.props.contentProp }</h2>
</div>
);
}
}
export default StateProps;