list the items in react

Header.js

import React from 'react';

// state with render()
class Header extends React.Component {

  name = 'name in the class'


  render() {

    // user = {
    //   name: 'Anna',
    //   hobbies: 'Gold'
    // }
    let name = 'name in render'

    let content =
      <p>
        content from val
      </p>

    if (1) {
      content =
        <p>
          changed content
        </p>
    }

    return (
           <h1>
             {this.props.age}<br/>
             Hello<br/>
             {1+1}<br/>
             {content}<br/>
             {'hello'}<br/>
             { 5===2 ? 'yes': 'no' }<br/>
             {this.props.user.name}<br/>
             {this.props.user.hobbies.map((hobby)=> <li>{hobby}</li>)}
             {[<li>{'hahah'}</li>,
               <li>{'hohoho'}</li>]}

             {[<p>{1}</p>,
               <p>{2}</p>]}<br/>
             {name}<br/>
             {this.name}<br/>
             {this.props.userClass.name}
           </h1>
    );
  }
}

export default Header