title: React: Confusion with accessing another components state
body: <p>I'm completely new to React and am a bit confused. I've read around and people say you shouldn't need to access another components state.</p>
  <p>So I have two classes: Login.js and InputBox.js (and a few more - shouldn't make a difference in this case).</p>
  <p>InputBox is a class that contains a bootstrap Form.Control with an onChange event that will store the inputted value in the state. I made this class so I can quickly reuse the code when creating other forms. Surely Login.js needs to be able to access the state to get this value in order to send a request to my backend? My thought process could be completely wrong.. apologies if so!</p>
  <p><strong>InputBox.js</strong></p>
  <pre><code>import React, { Component } from 'react'
  import Form from 'react-bootstrap/Form'
  import Col from 'react-bootstrap/Col'
  import FormGroup from 'react-bootstrap/FormGroup'
  
  class InputBox extends Component {
  
      constructor(props) {
          super(props)
      
          this.state = {
               textInput: &quot;&quot;
          }
      }
  
      changeHandler = (event) =&gt; {
          this.setState({
              textInput: event.target.value
          })
      }
      
      render() {
          return (
              &lt;&gt;
              &lt;FormGroup&gt;
                  &lt;Col md={3}&gt;
                      &lt;Form.Label&gt;{this.props.label}&lt;/Form.Label&gt;
                      &lt;Form.Control type={this.props.type} placeholder={this.props.placeholder} onChange={this.changeHandler} value={this.state.textInput} /&gt;
                      &lt;Form.Text className=&quot;text-muted&quot;&gt;
                          {this.props.description}
                      &lt;/Form.Text&gt;
                  &lt;/Col&gt;
              &lt;/FormGroup&gt;
  
              &lt;/&gt;
          )
      }
  }
  
  export default InputBox
  </code></pre>
  <p><strong>Login.js</strong></p>
  <pre><code>import React, { Component } from 'react'
  import &quot;../css/App.css&quot;
  import 'bootstrap/dist/css/bootstrap.min.css';
  import Container from 'react-bootstrap/Container'
  
  import FormArea from '../molecule/FormArea';
  import InputBox from '../molecule/InputBox';
  
  class Login extends Component {
    render() {
      return (
        &lt;div className=&quot;Login&quot;&gt;
          &lt;Container fluid&gt;
            &lt;FormArea&gt;
  
              &lt;InputBox type=&quot;text&quot; label=&quot;Username&quot; placeholder=&quot;Enter username&quot; description=&quot;We will never pass your information!&quot; /&gt;
  
              &lt;InputBox type=&quot;password&quot; label=&quot;Password&quot; placeholder=&quot;Enter password&quot; /&gt;
  
            &lt;/FormArea&gt;
        &lt;/Container&gt;
      &lt;/div&gt;
      )
    }
  }
  
  export default Login
  </code></pre>
  <p>Thanks</p>