Mounting 5/5 Didmountcomponent sends alert before render renders instead of after


#1
import React from 'react';
import ReactDOM from 'react-dom';

export class Flashy extends React.Component {
  componentWillMount() {
    alert('AND NOW, FOR THE FIRST TIME EVER...  FLASHY!!!!');
  }

 componentDidMount() {
      alert('YOU JUST WITNESSED THE DEBUT OF...  FLASHY!!!!!!!');
    }
  
  render() {

    alert('Flashy is rendering!');
    
    return (
      <h1 style={{ color: this.props.color }}>
        OOH LA LA LOOK AT ME I AM THE FLASHIEST
      </h1>
    );
    
    
  }
}

ReactDOM.render(
  <Flashy color='red' />,
  document.getElementById('app')
);

setTimeout(() => {
  ReactDOM.render(
    <Flashy color='green' />,
    document.getElementById('app')
  );
}, 2000);

#2

Not seeing any commas after the methods…


#3

None of the examples in 3/5 use commas after the methods?


#4

Can’t say, haven’t got that far yet. Do the instructions say to write that alert where you have it? Of course it is going to run before any rendering, it’s before the return statement.


#5

Yes, that is why I bring it up. I believe there is an error in the instructions. We shouldn’t put the Didmountcomponent function before render when we want it to appear after render. When does ReactJS part 3 come out? Also, why is there no distinct course saying this is React Native and not regular React when this is for mobile apps not web apps? Genuinley curious, idk, looking for you to school me on this one.


#6

Best thing I can offer is advice to read up as much as you can if React.js seems like a good fit for you. I cannot speak for CC as to how and why the course is what it is. I’ll invite a CC team member to see if there is an answer to your question. It’s holiday season, though, so a reply may be several days in coming.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.