g-patel/gist:49a29e9a8728589e0a704a3919bf0a04

## gistfile1.txt
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="root">nothing rendered yet</div>
<script src='https://unpkg.com/react@16.2.0/umd/react.development.js'></script>
<script src='https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js'></script>
<script src="https://unpkg.com/@babel/standalone@7.0.0-beta.40/babel.js"></script>

<script type="text/babel">
  const favCities = [
    'San Francisco',
    'New York',
    'Vegas'
  ];

  class FavoriteCity extends React.Component {
    constructor (props) {
      super(props);
      this.state = {
        fontWeight: 'bold'
      }

      this.toggleFontWeight = this.toggleFontWeight.bind(this);
    }

    toggleFontWeight() {
      const newFontWeight = this.state.fontWeight === 'bold' ? 'normal' : 'bold';
      this.setState({fontWeight: newFontWeight});

    }

    render() {
      return (
        <li
            style={
              {
                fontWeight: this.state.fontWeight,
                color: 'limegreen'
              }
            }
            onClick={this.toggleFontWeight}>{this.props.city}
        </li>
      );
    }
  };

//  const FavoriteCity = function (props) {
//    return (
//      React.createElement('li', {style: {color: 'limegreen'}}, props.city)
//    );
//  };

  const App = () => {
    return (
      <div id="cities">
        <h1>My Fav Cities</h1>
        <ul>
          {
            favCities.map(function (city) {
              return (
               <FavoriteCity city={city} />
              )
            })
          }
        </ul>
      </div>
    )
  }

  ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<div id="root">nothing rendered yet</div>
	<script src='https://unpkg.com/react@16.2.0/umd/react.development.js'></script>
	<script src='https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js'></script>
	<script src="https://unpkg.com/@babel/standalone@7.0.0-beta.40/babel.js"></script>

	<script type="text/babel">
	const favCities = [
	'San Francisco',
	'New York',
	'Vegas'
	];

	class FavoriteCity extends React.Component {
	constructor (props) {
	super(props);
	this.state = {
	fontWeight: 'bold'
	}

	this.toggleFontWeight = this.toggleFontWeight.bind(this);
	}

	toggleFontWeight() {
	const newFontWeight = this.state.fontWeight === 'bold' ? 'normal' : 'bold';
	this.setState({fontWeight: newFontWeight});

	}

	render() {
	return (
	<li
	style={
	{
	fontWeight: this.state.fontWeight,
	color: 'limegreen'
	}
	}
	onClick={this.toggleFontWeight}>{this.props.city}
	</li>
	);
	}
	};

	// const FavoriteCity = function (props) {
	// return (
	// React.createElement('li', {style: {color: 'limegreen'}}, props.city)
	// );
	// };

	const App = () => {
	return (
	<div id="cities">
	<h1>My Fav Cities</h1>
	<ul>
	{
	favCities.map(function (city) {
	return (
	<FavoriteCity city={city} />
	)
	})
	}
	</ul>
	</div>
	)
	}

	ReactDOM.render(<App />, document.getElementById('root'));
	</script>
	</body>
	</html>