16. Use Lifecycle Methods¶
Lifecylce methods are methods which are called on specific external events.
For example the componentDidMount
method is called when the component gets added to the dom.
We can use this method to do additional calls.
For example in our case we want to fetch the initial data from the backend.
31 32 33 | componentDidMount() {
this.props.getFaqItems();
}
|
The getFaqItems
method is mapped using the connect call.
The full Faq
component will now look like this:
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import FaqItem from "./FaqItem";
import { addFaqItem, getFaqItems } from "../actions";
class Faq extends Component {
static propTypes = {
faq: PropTypes.arrayOf(
PropTypes.shape({
question: PropTypes.string.isRequired,
answer: PropTypes.string.isRequired
})
),
addFaqItem: PropTypes.func.isRequired,
getFaqItems: PropTypes.func.isRequired
};
constructor(props) {
super(props);
this.onChangeQuestion = this.onChangeQuestion.bind(this);
this.onChangeAnswer = this.onChangeAnswer.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
question: "",
answer: ""
};
}
componentDidMount() {
this.props.getFaqItems();
}
onChangeQuestion(event) {
this.setState({
question: event.target.value
});
}
onChangeAnswer(event) {
this.setState({
answer: event.target.value
});
}
onSubmit(event) {
this.props.addFaqItem(this.state.question, this.state.answer);
this.setState({
question: "",
answer: ""
});
event.preventDefault();
}
render() {
return (
<div>
<ul>
{this.props.faq.map((item, index) => (
<FaqItem
question={item.question}
answer={item.answer}
index={index}
/>
))}
</ul>
<form onSubmit={this.onSubmit}>
<label>
Question:
<input
name="question"
type="text"
value={this.state.question}
onChange={this.onChangeQuestion}
/>
</label>
<label>
Answer:
<textarea
name="answer"
value={this.state.answer}
onChange={this.onChangeAnswer}
/>
</label>
<input type="submit" value="Add" />
</form>
</div>
);
}
}
export default connect(
(state, props) => ({
faq: state.faq
}),
{ addFaqItem, getFaqItems }
)(Faq);
|
Differences
--- a/src/components/Faq.jsx
+++ b/src/components/Faq.jsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
import PropTypes from "prop-types";
import FaqItem from "./FaqItem";
-import { addFaqItem } from "../actions";
+import { addFaqItem, getFaqItems } from "../actions";
class Faq extends Component {
static propTypes = {
@@ -13,7 +13,8 @@ class Faq extends Component {
answer: PropTypes.string.isRequired
})
),
- addFaqItem: PropTypes.func.isRequired
+ addFaqItem: PropTypes.func.isRequired,
+ getFaqItems: PropTypes.func.isRequired
};
constructor(props) {
@@ -27,6 +28,10 @@ class Faq extends Component {
};
}
+ componentDidMount() {
+ this.props.getFaqItems();
+ }
+
onChangeQuestion(event) {
this.setState({
question: event.target.value
@@ -89,5 +94,5 @@ export default connect(
(state, props) => ({
faq: state.faq
}),
- { addFaqItem }
+ { addFaqItem, getFaqItems }
)(Faq);