title: React call a function from other component
body: <p>I'm new to ReactJS and I'm doing a simple CRUD with ReactJS.</p>
  
  <p>I want to add a new Hero to a list of Heroes in class HeroModel. However I don't know how to call the function AddHero in HeroModel.js from AddHero.js.</p>
  
  <p>Here is my code:</p>
  
  <p>HeroModel.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class HeroModel {
  
  state = {
      Heroes: [
          { Id: 1, Name: "hero1", Dob: new Date("1-1-2017"), Stocked: true, Price: 1.50 },
          { Id: 2, Name: "hero2", Dob: new Date("5-31-2018"), Stocked: false, Price: 2.50 },
          { Id: 3, Name: "hero3", Dob: new Date("2019"), Stocked: true, Price: 3.50 },
          { Id: 4, Name: "hero4", Dob: new Date("4-20-2010"), Stocked: false, Price: 4.50 },
          { Id: 5, Name: "hero5", Dob: new Date("12-31-2018"), Stocked: true, Price: 5.50 },
      ]
  }
  
  GetAllHeroes() {
      return this.state.Heroes;
  }
  
  AddHero(name, dob, stocked, price) {
      let id = this.state.Heroes.length + 1;
      this.state.Heroes = [...this.state.Heroes,
      { Id: id, Name: name, Dob: dob, Stocked: stocked, Price: price }];
      }
  }
  
  export default HeroModel;
  </code></pre>
  
  <p>AddHero.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import HeroModel from './HeroModel';
  
  class AddHero extends Component {
  
  constructor(props) {
      super(props);
  
      this.state = {
          Id: 0, Name: "", Dob: new Date(), Stocked: true, Price: 0
      };
  
  }
  
  onNameChange(e) {
      this.setState({
          Name: e.target.value
      });
  }
  
  onDobChange(e) {
      this.setState({
          Dob: e.target.value
      });
  }
  
  onStockedChange(e) {
      this.setState({
          Stocked : e.target.value
      });
  }
  
  onPriceChange(e) {
      this.setState({
          Price : e.target.value
      });
  }
  
  onSave(e){
  //----I get stuck here-----
  //    (new HeroModel).AddHero(
  //        this.state.Name, this.state.Dob, 
  //        this.state.Stocked, this.state.Price);
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;h1&gt;Add hero&lt;/h1&gt;
              &lt;form&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Name &lt;/label&gt;
                      &lt;input type="text" onChange={this.onNameChange.bind(this)}&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Dob &lt;/label&gt;
                      &lt;input type="date" onChange={this.onDobChange.bind(this)} defaultValue={new Date().toISOString().substr(0, 10)}&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Stocked &lt;/label&gt;
                      &lt;input type="checkbox" onChange={this.onStockedChange.bind(this)} &gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Price &lt;/label&gt;
                      &lt;input type="text" onChange={this.onPriceChange.bind(this)}&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;button onClick={this.onSave.bind(this)}&gt;Save&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default AddHero;
  </code></pre>
  
  <p>Please help me to add a new Hero to a list of Heroes in HeroMode.js. 
  I comment in function onSave(e) where I get stuck.</p>
  
  <p>Thank you in advanced.</p>