Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

49

.99

$

24

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

useEffect

Downloads

Become a pro to download code and videos

Comments

T-ray

over 1 year ago [edited]

@Rebecca Hey there, if you go to the React documentation, they provide the same example with a class component: https://reactjs.org/docs/hooks-effect.html

Anwar

about 3 years ago [edited]

@Rebecca Maybe Something like this.

import React from "react";
import "./App.css";
import Toggle from "./Toggle";
class App extends React.Component {
  state = {
    name: ""
  };
  setName = name => {
    this.setState({ name: name });
  };
  componentDidMount() {
    document.title = "Custom Default Title";
  }
  componentDidUpdate() {
    document.title = this.state.name;
  }
  render() {
    return (
      <div className="App">
        <h1>Topic</h1>
        <Toggle />
        <form
          onSubmit={e => {
            e.preventDefault();
          }}
        >
          <input
            type="text"
            onChange={e => this.setName(e.target.value)}
            value={this.state.name}
          />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

Rebecca

about 3 years ago

Do you have an example of what this code would look like as a class component: ie: how we would do the same thing having to use didMount and didUpdate?

Want to join the conversation?

Become a Pro member today!