import React from "react";

import { UserChildren, UserClass, UserFunction } from "./user";

function ChangeAge(props) {
return (
<div>
<button onClick={props.onClick}>Change age</button>
</div>
);
}

export default class App extends React.Component {

state = {
users: [
{ name: "Ivan", years: 30 },
{ name: "Marko", years: 35 },
{ name: "Ana", years: 25 },
],
children: "A hobi mi je plivanje.",
};

handleClick = () => {
const newUsers = this.state.users.map((user) => ({
...user,
years: user.years + 10,
}));

this.setState({ users: newUsers });

};

render() {
const { users } = this.state;

return (
<div>
<h1>React aplikacija</h1>
<p>Ovo zbilja radi</p>
<UserFunction name={users[0].name} years={users[0].years} />
<ChangeAge onClick={this.handleClick} />
<UserFunction name={users[1].name} years={users[1].years} />
<ChangeAge />
<UserClass name={users[2].name} years={users[2].years} />
<ChangeAge />
<UserChildren name={users[2].name} years={users[2].years}>
A hobi mi je plivanje.
</UserChildren>
<ChangeAge />
</div>
);
}
}