Temperature Calculator from React official docs

presentation.jsx

export const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }

export class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.props.onChange(e.target.value);
  }
  render() {
    const value = this.props.value;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={value} onChange={this.handleChange} />
      </fieldset>
    )
  }
}

export function BoilingVerdict(props) {
  if (props.celsius >= 100) return <p>The water would boil.</p>
  return <p>The water would not boil.</p>
}

react-devtools-state.gif

React official example: https://facebook.github.io/react/docs/lifting-state-up.html