Determining the state of matter for some substances I am new to React and still getting a handle on props and state. I tried
 to adopt the example of lifting state from 
the React Docs
 and add the feature of different criteria by liquid type for evaluating these values.

Here is the JSBin version.

const liquidNames = {
  w: "Water",
  eth: "Ethanol"
};

var liquidInventory = {ethanol: {
  name: "Ethanol",
  freezing: -173.2,
  boiling: 173.1
}, "water": {
  name: "Water",
  freezing: 0,
  boiling: 212
}};

//test function to determine 'state of matter'
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;
  }
}

//component to present the inputs and values of each water and ethanol
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 liquidType = this.props.liquidType;
    return (
      &lt;div&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Enter Temperature for {liquidType}: &lt;/legend&gt;
        &lt;input value={temperature}
          onChange={this.handleChange} /&gt;
          &lt; LiquidState liquidType={liquidType} temperature={temperature} /&gt;
      &lt;/fieldset&gt;
      &lt;/div&gt;
    );
  }
}

//parent Temperature component that holds overall program state
class Temperature extends React.Component {
  constructor(props) {
    super(props);
    this.testWater = this.testWater.bind(this);
    this.testEthanol = this.testEthanol.bind(this);
    this.state = {
      temperature: '',
      liquidType: ''
    };
  }

  testWater(temperature) {
    this.setState({temperature})
  }

  testEthanol(temperature) {
    this.setState({temperature})
  }

  render() {
    const liquidType = this.state.liquidType;
    const temperature = this.state.temperature;
    return (
      &lt;div&gt;
        &lt;TemperatureInput 
          temperature={temperature}
          liquidType={'water'}
          onTemperatureChange={this.testWater}  /&gt;
         &lt;TemperatureInput 
          temperature={temperature}
           liquidType={'ethanol'}
          onTemperatureChange={this.testEthanol}  /&gt;
      &lt;/div&gt;
    );
  }
}

ReactDOM.render(
  &lt;Temperature /&gt;,
  document.getElementById('root')
);
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;
    )
  }
}