Reactjs, error send data to post with axios

Question

hi I am trying to post a form with email and password, but I have an error in the function that sends the data, that function you see in the image

action.js

import axios from 'axios';
export const createUser =(usuariosBody, callback) => {
  return function(dispatch){
      dispatch({type: 'CREATE_USER_REQUEST'});
      axios.post('http://localhost:8080/users', usuariosBody)
      .then((response)=>{
            dispatch({type: 'CREATE_USER_SUCCESS', payload:response.data})
            if (typeof callback === 'function') {
                callback(null, response.data);
            }
         })
    }
}

component.jsx

class  LoginComponent extends Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
    }
    render(){
        return(
          <section className="form-sign brown lighten-5">
              <form  onSubmit={this.handleSubmit.bind(this)}>
                  <input ref="email" placeholder='Email' />
                  <input type="password"  ref="password"  />
                  <Button   type='submit' >send</Button>
              </form>
          </section>
        )
    }

    handleSubmit(event) {
        this.preventDefault();

        const email = ReactDOM.findDOMNode(this.refs.email).value.trim();
        const password = ReactDOM.findDOMNode(this.refs.password).value.trim();

        // create a user object
        const user = {
          email,
          password
        };

        // call the action

        this.props.createUser(user, function (err, res) {
            if (err) {
                console.error(err);
            } else {
                console.log(res);
            }
        });
    }
}
export default LoginComponent;

container.jsx

import React, {Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {createUser} from '../action/action.js';
import {LoginComponent} from '../component/loginComponent.jsx';

class CreateUserContainer extends Component{
    componentDidMount(){

    }

    render (){
        return (<LoginComponent createUser={this.props.createUser} />);
    }
}

function mapStateToProps(store) {
    return {};
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({
        createUser:CreateUser
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(CreateUserContainer);

thanks for your help

Answer 1

You are importing {CreateUser} and trying to use {createUser} in the container.jsx file.

Answer 2

You need to use mapDispatchToProps instead of matchDispatchToProps and also use CreateUser in you mapDispatchToProps function since you imported it as CreateUser

class CreateUserContainer extends Component{

    constructor(props) {
        super(props);
    }
    componentDidMount(){

    }
    render (){
        return(
            <LoginComponent createUser={this.props.createUser} />
        )
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({
        createUser:CreateUser
    }, dispatch)
}

Also your class must implement the constructor to inherit the props

One more thing is that your handleSubmit function in LoginComponent is not bound

class  LoginComponent extends Component{
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

You can also try and console.log(this.props) in your LoginComponent to see if it receives the createUser function