Day 63: React Course on Udemy

Props with Class Components

// no initial place to insert props object as an argument/parameters as with stateless functional components
// access props object with "this" keyword and return value of name
class PersonGreeting extends React.Component {
  render() {
    var personStyle = {
      height: 300,
      width: 300
      backgroundColor: this.props.color
    }
    return(
      <div style={personStyle}>Hello, {this.props.name}</div>
    );
  }
}

// pass values from topdown
ReactDOM.render(
  <div>
    <PersonGreeting color="tomato" name="Jimmy"/>
    <PersonGreeting color="blue" name="Bob"/>
    <PersonGreeting color="green" name="Sara"/>
  </div>,
  document.getElementById("app")
);