3.0 KiB
3.0 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.
Note: The componentWillMount
Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. (Source)
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
ReactDOM.render(<MyComponent />, document.getElementById('root'))
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 />
}
};