title: React: Passing props to function components
body: <p>I have a seemingly trivial question about props and function components. Basically, I have a container component which renders a Modal component upon state change which is triggered by user click on a button. The modal is a stateless function component that houses some input fields which need to connect to functions living inside the container component.</p>
  <p>My question: How can I use the functions living inside the parent component to change state while the user is interacting with form fields inside the stateless Modal component? Am I passing down props incorrectly? Thanks in advance.</p>
  <p><strong>Container</strong></p>
  <pre><code>export default class LookupForm extends Component {
      constructor(props) {
          super(props);
          
          this.state = {
              showModal: false
          };
      }
      render() {
          let close = () =&gt; this.setState({ showModal: false });
  
          return (
              ... // other JSX syntax
              &lt;CreateProfile fields={this.props} show={this.state.showModal} onHide={close} /&gt;
          );
      }
  
      firstNameChange(e) {
        Actions.firstNameChange(e.target.value);
      }
  };
  </code></pre>
  <p><strong>Function (Modal) Component</strong></p>
  <pre><code>const CreateProfile = ({ fields }) =&gt; {
    console.log(fields);
    return (
        ... // other JSX syntax
        
        &lt;Modal.Body&gt;
          &lt;Panel&gt;
            &lt;div className=&quot;entry-form&quot;&gt;
              &lt;FormGroup&gt;
                &lt;ControlLabel&gt;First Name&lt;/ControlLabel&gt;
                &lt;FormControl type=&quot;text&quot;
                  onChange={fields.firstNameChange} placeholder=&quot;Jane&quot;
                  /&gt;
              &lt;/FormGroup&gt;
    );
  };
  </code></pre>
  <p>Example: say I want to call <code>this.firstNameChange</code> from within the Modal component. I guess the &quot;destructuring&quot; syntax of passing props to a function component has got me a bit confused. i.e:</p>
  <p><code>const SomeComponent = ({ someProps }) = &gt; { // ... };</code></p>