53 lines
899 B
Markdown
53 lines
899 B
Markdown
---
|
|
title: Use the Lifecycle Method componentDidMount
|
|
---
|
|
## Use the Lifecycle Method componentDidMount
|
|
|
|
This challenges introduces the ``` componentDidMount ``` Lifecycle method. This is used to set state after a giventime period.
|
|
|
|
The syntax for the method is:
|
|
```javascript
|
|
componentDidMount() {
|
|
setTimeout( () => {
|
|
this.setState({
|
|
one: 1,
|
|
two: false
|
|
});
|
|
}, interval);
|
|
}
|
|
```
|
|
where ``` one ``` and ``` two ``` are states you want to set after ``` interval ```ms.
|
|
|
|
### Hint
|
|
|
|
Use
|
|
```javascript
|
|
this.state.stateName
|
|
```
|
|
and change ``` stateName ``` as required.
|
|
|
|
### Solution
|
|
|
|
Change
|
|
```javascript
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>Active Users: { /* change code here */ }</h1>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
to
|
|
|
|
```javascript
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>Active Users: { this.state.activeUsers }</h1>
|
|
</div>
|
|
);
|
|
}
|
|
```
|