title: ReactJS passing state to another class
body: <p>i have problem in accesing the state on the other component. I am beginner in using the reactjs. I am still confuse on how to use the state and props. I am getting the input which will be set to the state as username then I will pass it to the formDetails component and use it when the handleSubmit triggers. can someone help me I would appreciate any comments, answers, suggestions. </p>
  
  <pre><code>//Components
   class DaysForm extends React.Component {
  constructor() {
      super();
      this.state = {
          username: ""
      };
      this.updateInput = this.updateInput.bind(this);
  }
  
  onCalculate(e) {
      $("#myModal").modal();
  }
  
  updateInput(event) {
      this.setState({ username: event.target.value });
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;p&gt;How many days are in a full time working week?&lt;/p&gt;
              &lt;input
                  type="text"
                  className="form-control"
                  onChange={this.updateInput}
              /&gt;
              &lt;p&gt;How many days a week will this employee work?&lt;/p&gt;
              &lt;input type="text" className="form-control" /&gt;
              &lt;br /&gt;
              &lt;center&gt;
                  &lt;button
                      className="btn btn-default"
                      onClick={this.onCalculate.bind(this)}
                  &gt;
                      Calculate
                  &lt;/button&gt;
              &lt;/center&gt;
          &lt;/div&gt;
      );
  }
  }
  
  class FormDetails extends React.Component {
  constructor(props) {
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleSubmit(event) {
      //console.log here the state that is comming from the component
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;p&gt;Email Address:&lt;/p&gt;
              &lt;input type="text" className="form-control" /&gt;
              &lt;p&gt;Business Name:&lt;/p&gt;
              &lt;input type="text" className="form-control" /&gt;
              &lt;p&gt;Phone Number:&lt;/p&gt;
              &lt;input type="text" className="form-control" /&gt;
              &lt;br /&gt;
              &lt;center&gt;
                  &lt;button
                      className="btn btn-default"
                      onClick={this.handleSubmit}
                  &gt;
                      Submit
                  &lt;/button&gt;
              &lt;/center&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>