Determining the state of matter for some substances
Works well!

This:

const liquidType = this.state.liquidType;
const temperature = this.state.temperature;


Can be written as:

const { liquidType, temperature } = this.props;


This:

function LiquidState(props){
  var liquid = props.liquidType;
  if (props.temperature &gt;= liquidInventory[liquid].boiling){
    return &lt;p&gt; Boiling {liquid}&lt;/p&gt;
  } else if (props.temperature &lt;= liquidInventory[liquid].freezing){
    return &lt;p&gt; Frozen {liquid}&lt;/p&gt;
  } else {
    return &lt;p&gt; You have liquid {liquid}&lt;/p&gt;
  }
}


Can be written as:

const LiquidState = ({ liquidType, temperature }) =&gt; {
  if (temperature &gt;= liquidInventory[liquidType].boiling){
    return &lt;p&gt; Boiling {liquidType}&lt;/p&gt;
  } else if (temperature &lt;= liquidInventory[liquidType].freezing){
    return &lt;p&gt; Frozen {liquidType}&lt;/p&gt;
  } else {
    return &lt;p&gt; You have liquid {liquidType}&lt;/p&gt;
  }
}


It's not much, but it's been useful to me.

I think lifting the state up is mainly important, if you're actually using the state in the high level component or one of its child components.

In this case, the value in the input is passed on to every input. If you instead keep state local to the component, you can type different values for each liquid.

I've just made my own attempt to learn something myself. Maybe there's one more useful thing hiding in there:

var liquids = {
  ethanol: {
    name: "Ethanol",
    states: [
      {
        minTemperature: 173.1,
        maxTemperature: Infinity,
        state: 'Boiling'
      },
      {
        minTemperature: -173.2,
        maxTemperature: 173.1,
        state: 'Liquid'
      },
      {
        minTemperature: -(Infinity),
        maxTemperature: -173.2,
        state: 'Frozen'
      }
    ]
  },
  water: {
    name: "Water",
    states: [
      {
        minTemperature: 212,
        maxTemperature: Infinity,
        state: 'Boiling'
      },
      {
        minTemperature: 0,
        maxTemperature: 212,
        state: 'Liquid'
      },
      {
        minTemperature: -(Infinity),
        maxTemperature: 0,
        state: 'Frozen'
      }
    ]
  }
}

class TemperatureInput extends Component {
  constructor(props) {
    super(props)
    this.state = {
      temperature: 0
    }
  }

  onChangeTemperature(event) {
    this.setState({ temperature: parseFloat(event.target.value) })
  }

  renderLiquidState(liquid, temperature) {
    for(var i = 0; i &lt; liquid.states.length; i++) {
      if(liquid.states[i].minTemperature &lt; temperature &amp;&amp; temperature &lt;= liquid.states[i].maxTemperature) {
        return &lt;span&gt;{liquid.states[i].state} {liquid.name}&lt;/span&gt;
      }
    }
  }

  render() {
    const { liquid } = this.props
    const { temperature } = this.state

    return (
      &lt;div&gt;
        &lt;fieldset&gt;
          &lt;legend&gt;
            Enter Temperature for {liquid.name}:
          &lt;/legend&gt;
          &lt;input
            value={temperature}
            onChange={this.onChangeTemperature.bind(this)}
          /&gt;

          {this.renderLiquidState(liquid, temperature)}
        &lt;/fieldset&gt;
      &lt;/div&gt;
    )
  }
}

class Temperature extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;TemperatureInput liquid={liquids.water} /&gt;
        &lt;TemperatureInput liquid={liquids.ethanol} /&gt;
      &lt;/div&gt;
    )
  }
}