3.8 KiB
3.8 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d403617d | Use the Lifecycle Method componentDidMount | 6 | false |
Description
componentDidMount()
. This method is called after a component is mounted to the DOM. Any calls to setState()
here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.
Instructions
componentDidMount()
. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of activeUsers
in the h1
. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
Tests
tests:
- text: <code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.
testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1); })(), '<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.');
- text: Component state should be updated with a timeout function in <code>componentDidMount</code>.
testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(String(mockedComponent.instance().componentDidMount)); })(), 'Component state should be updated with a timeout function in <code>componentDidMount</code>.');
- text: The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>'s state.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ activeUsers: 1237 }); return mockedComponent.find(''h1'').text(); }; const second = () => { mockedComponent.setState({ activeUsers: 1000 }); return mockedComponent.find(''h1'').text(); }; assert(new RegExp(''1237'').test(first()) && new RegExp(''1000'').test(second()), ''The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>'s state.''); }; '
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeUsers: null
};
}
componentDidMount() {
setTimeout( () => {
this.setState({
activeUsers: 1273
});
}, 2500);
}
render() {
return (
<div>
<h1>Active Users: { /* change code here */ }</h1>
</div>
);
}
};
After Test
ReactDOM.render(<MyComponent />, document.getElementById('root'))
Solution
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeUsers: null
};
}
componentDidMount() {
setTimeout( () => {
this.setState({
activeUsers: 1273
});
}, 2500);
}
render() {
return (
<div>
<h1>Active Users: {this.state.activeUsers}</h1>
</div>
);
}
};