JSX Exercises #3

class Person extends React.Component {
  render() {
    var age = this.props.age;
    var message = "";
    if (age >= 21 ){
      message = "Have a Drink!"
    } else {
      message = "You must be 21"
    }
    
    var name = this.props.name;
    if (name.length > 8) {
      name = name.slice(0, 6);
    } 
    return (
      <div>
      <p>Learn some information about this person</p>
        <p>{name}</p>
        <h3>{message}</h3>
         <ul>
          {this.props.hobbies.map(hobby => {
             return (<li>{hobby}</li>);
           })}
        </ul>
       
      </div>
    );
  }
}

ReactDOM.render(<Person name="Claudia" age = "22" hobbies = {["flying", "knitting", "reading"]} />, document.getElementById('app'));