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;