title: Checkbox in Parent component does not fire function in child component in React.js
body: <p>In my parent component I have four checkboxes and essentially i'd like each checkbox to show (if checked) or not show (if not checked) a value from a function I created in a child component.</p>
  
  <pre><code>export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        input: '',
        weatherFromInput: null,
        dataTracker: null,
        isChecked: false,
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }
  
    componentDidMount() {
      console.dir(dataTracker);
    }
  
    handleChange(event) {
      this.setState({
        input: event.target.value,
      });
    }
  
    handleCheckboxChange(event) {
      console.log('checkbox changed!', event);
      this.setState({ isChecked: event.target.checked });
    }
  
    handleSubmit(event) {
      event.preventDefault();
      var mode = function mode(arr) {
        return arr.reduce(
          function(current, item) {
            var val = (current.numMapping[item] = (current.numMapping[item] || 0) + 1);
            if (val &gt; current.greatestFreq) {
              current.greatestFreq = val;
              current.mode = item;
            }
            return current;
          },
          { mode: null, greatestFreq: -Infinity, numMapping: {} },
          arr
        ).mode;
      };
      var promises = Promise.all([api.getWeather(this.state.input), api.getForecast(this.state.input)]);
  
      promises.then(
        function(input) {
          var firstSevenDays = input[1].list.slice(0, 7);
          var tempertures = firstSevenDays.map(function(day) {
            return Math.floor(day.main.temp);
          });
          var dataObj = new dataTracker(
            input[0].main.temp_min,
            input[0].main.temp_max,
            input[0].main.temp_min + input[0].main.temp_max / 2,
            mode(tempertures)
          );
          this.setState({ weatherFromInput: input[0], input: '', dataTracker: dataObj });
        }.bind(this)
      );
    }
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="container"&gt;
            &lt;form name="weatherApp" onSubmit={this.handleSubmit}&gt;
              &lt;h2&gt;Open Weather App&lt;/h2&gt;
              &lt;div className="row"&gt;
                &lt;div className="one-half column"&gt;
                  &lt;label htmlFor="insertMode"&gt;Insert your location&lt;/label&gt;
                  &lt;input
                    name="zipcode"
                    className="u-full-width"
                    placeholder="please enter city or zipcode"
                    type="text"
                    autoComplete="off"
                    value={this.state.input}
                    onChange={this.handleChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="one-half column"&gt;
                  &lt;label htmlFor="showMin"&gt;show minimum&lt;/label&gt;
                  &lt;input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} /&gt;
                  &lt;label htmlFor="showMax"&gt;show maximum&lt;/label&gt;
                  &lt;input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} /&gt;
                  &lt;label htmlFor="showMean"&gt;show mean&lt;/label&gt;
                  &lt;input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} /&gt;
                  &lt;label htmlFor="showMean"&gt;show mode&lt;/label&gt;
                  &lt;input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="row"&gt;
                &lt;div className="two-half column"&gt;
                  &lt;input type="submit" value="Submit" /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div className="container"&gt;
            &lt;div className="row"&gt;
              &lt;div className="twelve columns"&gt;
                {this.state.weatherFromInput !== null ? (
                  &lt;WeatherDisplay dataTracker={this.state.dataTracker} weather={this.state.weatherFromInput} /&gt;
                ) : null}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>This is my child component:</p>
  
  <pre><code>export default function WeatherDisplay(props) {
    var { weather, dataTracker } = props;
    console.log('dataTracker', dataTracker);
  
    return (
      &lt;div className="weather-display"&gt;
        &lt;h1&gt;{weather.name}&lt;/h1&gt;
        &lt;h2&gt;{`Current temperature: ${Math.floor(weather.main.temp)}`}&lt;/h2&gt;
        &lt;h3&gt;{`Current humidity: ${weather.main.humidity}%`}&lt;/h3&gt;
        &lt;h4&gt;{`Minimum temperature: ${dataTracker.showMin()}%`}&lt;/h4&gt;
        &lt;h4&gt;{`Maximum temperature: ${dataTracker.showMax()}%`}&lt;/h4&gt;
        &lt;h4&gt;{`Mean temperature: ${dataTracker.showMean()}%`}&lt;/h4&gt;
        &lt;h4&gt;{`Mode temperature: ${dataTracker.showMode()}%`}&lt;/h4&gt;
  
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>How do I wire them together?</p>