class AboutMe extends React.Component<{}, { name: string, gender: string, hobbies: string[], languages: string[] }> {
    state = {
        name: "Cool",
        age: 21,
        gender: "Male",
        hobbies: ["Programming", "Photography", "Videography", "Swimming"],
        languages: ["Swedish", "English", "German"],
        from: "Sweden"
    };

    render() {
        return (
            <div>
                <h1>About me</h1>
                <p>
                    My name is {this.state.name} and I am a {this.state.age} years old {this.state.gender.toLowerCase()} coder from {this.state.from}.

                    Some of my hobbies include {this.state.hobbies.join(", ")}, and I speak {this.state.languages.join(", ")}.
                </p>
            </div>
        )
    }
}