lifting state up

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

const scaleName = {
	c: 'Celsius',
  f: 'Fahrenheit'
};

function toCelsius(fahrenheit){
	return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius){
	return (celsius * 9 / 5) + 32;
}

const tryConvert = (temperature,convert) =>{
	const input = parseFloat(temperature);
  if(Number.isNaN(input)){
  	return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

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

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

class Calculator extends React.Component{
	constructor(props){
  	super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature:'', scale:'c'}
  }
  
  handleCelsiusChange(temperature){
  	this.setState({scale:'c', temperature})
  }
  handleFahrenheitChange(temperature){
  	this.setState({scale:'f', temperature})
  }
  
  render(){
  	const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature,toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature,toFahrenheit) : temperature;
    
    return (
    	<div>
    	  <TemperatureInput 
          scale ='c'
          temperature={celsius}
         ...