const app = document.getElementById('app');

function Header({ title }) { // object destructuring
    return <h1>{`Hello ${title ? title : 'World'}`}</h1>;
}

function Homepage() {
    const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

    const [likes, setLikes] = React.useState(0); // array destructuring

    function handleClick() {
        setLikes(likes + 1);
    }

    return (
        <div>
            <Header title="React" />
            <ul>
                {names.map((name) => (
                    <li key={name}>{name}</li>
                ))}
            </ul>
            <button onClick={handleClick}>Like {likes}</button>
        </div>
    );
}

const root = ReactDOM.createRoot(app);
root.render(<Homepage />);