React: Manage Updates with Lifecycle Methods

React: Manage Updates with Lifecycle Methods
0

#1

Not sure why my code isn’t passing the test I believe it might be a FCC error.

class Dialog extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillUpdate() {
    console.log('Component is about to update...');
  }
  // change code below this line
  componentWillRecieveProps(nextProps) {
    console.log(this.props)
    console.log(nextProps)
  }

  componentDidUpdate() {
    console.log('updated')
  }

  // change code above this line
  render() {
    return <h1>{this.props.message}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'First Message'
    };
    this.changeMessage = this.changeMessage.bind(this);
  }
  changeMessage() {
    this.setState({
      message: 'Second Message'
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.changeMessage}>Update</button>
        <Dialog message={this.state.message}/>
      </div>
    );
  }
};

#2

Can you format your code and add a link to the exercise?


#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

Note: Backticks are not single quotes.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#4

If I had a nickel for every time someone assumed that the server or JS or whatever was broken…

You have a spelling mistake here:

  componentWillRecieveProps(nextProps) {

It’s like I always joke: The annoying thing about computers is that they always do exactly what you tell them to.


#5

Actually, in case you aren’t a native English speaker, it’s “receive”, not “recieve”. Yeah, I’ve made that same mistake a few times.


#6

I just Face Palmed I am a native English speaker and after a line by line review to make sure it wasn’t a syntax error… It was a syntax error


#7

These kind of mistakes are the most frustrating, we make them all the time. For some reason, the word “receive” is one I misspell about 75% of the time.

Technically it wasn’t a syntax error, depending on how you look at it. You just defined a method called willRecieveProps. It was a perfectly valid method and you could have called it like any other method. But when React looked for the lifecycle method willReceiveProps it couldn’t find a definition for it so it didn’t fire it, like it normally doesn’t if it isn’t defined. So, you had completely valid React code, it just didn’t do what you wanted it to do - it did what it was told to do.