d2321
2/19/2020 - 6:32 PM

Component CREATION Lifecycle

class App extends Component {

constructor(props) {
  super(props);
  console.log("[App.js] constructor");
}

static getDerivedStateFromProps(props, state) {
  console.log("[App.js] getDerivedStateFromProps", props);
  return state;
}

componentDidMount() {
  console.log("[App.js] componentDidMount");
}

render() {
  console.log("[App.js] render");
}

}
const persons = props => {
  console.log("[Persons.js] rendering...");
  return props.persons.map((person, index) => {
    return (
      <Person
        name={person.name}
        age={person.age}
        click={() => props.clicked(index)}
        key={person.id}
        changed={event => props.changed(event, person.id)}
      >
        {index}
      </Person>
    );
  });
};
import React from "react";
import classes from "./Person.css";

const person = props => {
  console.log("[Person.js] rendering...");
  return (
    <div className={classes.Person}>
      <p onClick={props.click}>
        I'm a <b>{props.name}</b> and am {props.age} years old !
      </p>
      <p>{props.children}</p>
      <input type="text" onChange={props.changed} value={props.name} />
    </div>
  );
};

export default person;