title: Uncaught TypeError: createProfile is not a function
body: <pre><code>Uncaught TypeError: createProfile is not a function
      at onSubmit (CreateProfile.js:47:1)
      at onSubmit (CreateProfile.js:58:1)
      at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
      at invokeGuardedCallback (react-dom.development.js:4277:1)
      at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
      at executeDispatch (react-dom.development.js:9041:1)
      at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
      at processDispatchQueue (react-dom.development.js:9086:1)
      at dispatchEventsForPlugins (react-dom.development.js:9097:1)
  </code></pre>
  <p>I am getting this error, and i am not able to figure out why. I am trying to call the createProfile function so i can make a post request to the database and also change the State. After clicking the submit button, GET_PROFILE action must occur. But this error keeps showing up. I tried to console.log in the function, turns out, the function is not being run at all.</p>
  <pre><code>import axios from &quot;axios&quot;;
  import { setAlert } from &quot;./alert&quot;;
  
  import { GET_PROFILE, PROFILE_ERROR } from &quot;./types&quot;;
  
  // Get current users profile
  
  export const getCurrentProfile = () =&gt; async (dispatch) =&gt; {
    try {
      const res = await axios.get(&quot;/api/profile/me&quot;);
  
      dispatch({
        type: GET_PROFILE,
        payload: res.data,
      });
    } catch (err) {
      dispatch({
        type: PROFILE_ERROR,
        payload: { msg: err.response.statusText, status: err.response.status },
      });
    }
  };
  
  // Create or update profile
  export const createProfile =
    (formData, navigate, edit = false) =&gt;
    async (dispatch) =&gt; {
      //  await console.log(&quot;run hua&quot;);
      try {
        // console.log(&quot;try&quot;);
        const config = {
          headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
          },
        };
        const res = await axios.post(&quot;/profile&quot;, formData, config);
  
        dispatch({
          type: GET_PROFILE,
          payload: res.data,
        });
  
        dispatch(setAlert(edit ? &quot;Profile Updated&quot; : &quot;Profile Created&quot;));
  
        if (!edit) {
          navigate(&quot;/dashboard&quot;);
        }
      } catch (err) {
        const errors = err.response.data.errors;
  
        if (errors) {
          errors.forEach((error) =&gt; dispatch(setAlert(error.msg, &quot;danger&quot;)));
        }
  
        dispatch({
          type: PROFILE_ERROR,
          payload: { msg: err.response.statusText, status: err.response.status },
        });
      }
    };
  
  </code></pre>
  <p>This is the createProfile function</p>
  <pre><code>import React, { Fragment, useState } from &quot;react&quot;;
  
  import { withRouter} from &quot;../routing/WithRouter&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import { connect } from &quot;react-redux&quot;;
  import { createProfile} from &quot;../../actions/profile&quot;;
  
  
  
  const CreateProfile = (createProfile, navigate) =&gt; {
    const [formData, setFormData] = useState({
      company: &quot;&quot;,
      website: &quot;&quot;,
      location: &quot;&quot;,
      status: &quot;&quot;,
      skills: &quot;&quot;,
      githubusername: &quot;&quot;,
      bio: &quot;&quot;,
      twitter: &quot;&quot;,
      facebook: &quot;&quot;,
      linkedin: &quot;&quot;,
      youtube: &quot;&quot;,
      instagram: &quot;&quot;,
    });
    const [displaySocialInputs, toggleSocialinputs] = useState(false);
  
    const {
      company,
      website,
      location,
      status,
      skills,
      githubusername,
      bio,
      twitter,
      facebook,
      linkedin,
      youtube,
      instagram,
    } = formData;
  
    const onChange = (e) =&gt;
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = e =&gt; {  
        e.preventDefault();
        createProfile(formData, navigate);
  
    }
    return (
      &lt;Fragment&gt;
        &lt;h1 className=&quot;large text-primary&quot;&gt;Create Your Profile&lt;/h1&gt;
        &lt;p className=&quot;lead&quot;&gt;
          &lt;i className=&quot;fas fa-user&quot;&gt;&lt;/i&gt; Let's get some information to make your
          profile stand out
        &lt;/p&gt;
        &lt;small&gt;* = required field&lt;/small&gt;
        &lt;form className=&quot;form&quot; onSubmit={e=&gt; onSubmit(e)}&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;select name=&quot;status&quot; value={status} onChange={e =&gt; onChange(e)}&gt;
              &lt;option value=&quot;0&quot;&gt;* Select Professional Status&lt;/option&gt;
              &lt;option value=&quot;Developer&quot;&gt;Developer&lt;/option&gt;
              &lt;option value=&quot;Junior Developer&quot;&gt;Junior Developer&lt;/option&gt;
              &lt;option value=&quot;Senior Developer&quot;&gt;Senior Developer&lt;/option&gt;
              &lt;option value=&quot;Manager&quot;&gt;Manager&lt;/option&gt;
              &lt;option value=&quot;Student or Learning&quot;&gt;Student or Learning&lt;/option&gt;
              &lt;option value=&quot;Instructor&quot;&gt;Instructor or Teacher&lt;/option&gt;
              &lt;option value=&quot;Intern&quot;&gt;Intern&lt;/option&gt;
              &lt;option value=&quot;Other&quot;&gt;Other&lt;/option&gt;
            &lt;/select&gt;
            &lt;small className=&quot;form-text&quot;&gt;
              Give us an idea of where you are at in your career
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;Company&quot;
              name=&quot;company&quot;
              value={company}
              onChange={(e) =&gt; onChange(e)}
            /&gt;
            &lt;small className=&quot;form-text&quot;&gt;
              Could be your own company or one you work for
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;Website&quot;
              name=&quot;website&quot;
              value={website}
              onChange={(e) =&gt; onChange(e)}
            /&gt;
            &lt;small className=&quot;form-text&quot;&gt;
              Could be your own or a company website
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;Location&quot;
              name=&quot;location&quot;
              value={location}
              onChange={(e) =&gt; onChange(e)}
            /&gt;
            &lt;small className=&quot;form-text&quot;&gt;
              City &amp; state suggested (eg. Boston, MA)
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;* Skills&quot;
              name=&quot;skills&quot;
              value={skills}
              onChange={(e) =&gt; onChange(e)}
            /&gt;
            &lt;small className=&quot;form-text&quot;&gt;
              Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;Github Username&quot;
              name=&quot;githubusername&quot;
              value={githubusername}
              onChange={(e) =&gt; onChange(e)}
            /&gt;
            &lt;small className=&quot;form-text&quot;&gt;
              If you want your latest repos and a Github link, include your
              username
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;textarea
              placeholder=&quot;A short bio of yourself&quot;
              name=&quot;bio&quot;
              value={bio}
              onChange={(e) =&gt; onChange(e)}
            &gt;&lt;/textarea&gt;
            &lt;small className=&quot;form-text&quot;&gt;Tell us a little about yourself&lt;/small&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;my-2&quot;&gt;
            &lt;button
              onClick={() =&gt; toggleSocialinputs(!displaySocialInputs)}
              type=&quot;button&quot;
              className=&quot;btn btn-light&quot;
            &gt;
              Add Social Network Links
            &lt;/button&gt;
            &lt;span&gt;Optional&lt;/span&gt;
          &lt;/div&gt;
  
          {displaySocialInputs &amp;&amp; (
            &lt;Fragment&gt;
              &lt;div className=&quot;form-group social-input&quot;&gt;
                &lt;i className=&quot;fab fa-twitter fa-2x&quot;&gt;&lt;/i&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;Twitter URL&quot; name=&quot;twitter&quot; value={twitter} onChange={e=&gt;onChange(e)}/&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;form-group social-input&quot;&gt;
                &lt;i className=&quot;fab fa-facebook fa-2x&quot;&gt;&lt;/i&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;Facebook URL&quot; name=&quot;facebook&quot; value={facebook} onChange={e=&gt;onChange(e)}/&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;form-group social-input&quot;&gt;
                &lt;i className=&quot;fab fa-youtube fa-2x&quot;&gt;&lt;/i&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;YouTube URL&quot; name=&quot;youtube&quot; value={youtube} onChange={e=&gt;onChange(e)}/&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;form-group social-input&quot;&gt;
                &lt;i className=&quot;fab fa-linkedin fa-2x&quot;&gt;&lt;/i&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;Linkedin URL&quot; name=&quot;linkedin&quot; value={linkedin} onChange={e=&gt;onChange(e)}/&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;form-group social-input&quot;&gt;
                &lt;i className=&quot;fab fa-instagram fa-2x&quot;&gt;&lt;/i&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;Instagram URL&quot; name=&quot;instagram&quot; value={instagram} onChange={e=&gt;onChange(e)}/&gt;
              &lt;/div&gt;
            &lt;/Fragment&gt;
          )}
  
          &lt;input type=&quot;submit&quot; className=&quot;btn btn-primary my-1&quot; /&gt;
          &lt;a className=&quot;btn btn-light my-1&quot; href=&quot;dashboard.html&quot;&gt;
            Go Back
          &lt;/a&gt;
        &lt;/form&gt;
      &lt;/Fragment&gt;
    );
  };
  
  CreateProfile.propTypes = {
      createProfile: PropTypes.func.isRequired,
      
  };
  
  
  
  export default connect(null,{ createProfile })(withRouter(CreateProfile));
  
  </code></pre>
  <p>I called createProfile using onSubmit().
  Can anyone help me figure out what is wrong?</p>