reddit_help_react.js

class Person extends React.Component {
  render () {
    const name = this.props.name.length > 8
      ? this.props.name.substring(0, 5)
      : this.props.name;
    
    const age = this.props.age;
    const hobbies = this.props.hobbies.map((hobbie) => <li>{hobbie}</li>);
    
    return (
      <div>
        <p>Learn some information about this person</p>
        {age >= 21
           ? <h3>Hi {name}, have a drink</h3>
           : <h3>Sorry {name} you must be 21 to drink</h3>
        }
        <ul>{hobbies}</ul>
      </div>
    );
  }
}

ReactDOM.render(
  <Person
    name={'Alexxxxx'}
    age={21} 
    hobbies={['football', 'soccer', 'something']}
  />,
  document.getElementById('app'),
);