2.7 KiB
2.7 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d403617c | Use the Lifecycle Method componentWillMount | 6 | false |
Description
componentWillMount()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
The next several lessons will cover some of the basic use cases for these lifecycle methods.
Instructions
componentWillMount()
method is called before the render()
method when a component is being mounted to the DOM. Log something to the console within componentWillMount()
- you may want to have your browser console open to see the output.
Tests
tests:
- text: <code>MyComponent</code> should render a <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").length === 1; })(), "<code>MyComponent</code> should render a <code>div</code> element.");'
- text: <code>console.log</code> should be called in <code>componentWillMount</code>.
testString: 'assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,""); return lifecycle.includes("console.log("); })(), "<code>console.log</code> should be called in <code>componentWillMount</code>.");'
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
// change code below this line
// change code above this line
}
render() {
return <div />
}
};
After Test
console.info('after the test');
Solution
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
// change code below this line
console.log('Component is mounting...');
// change code above this line
}
render() {
return <div />
}
};