reactjsredux

Redux/React. TypeError: Cannot call a class as a function


So, I have a problem with the error like said in the title of question. I saw this answer Getting "Cannot call a class as a function" in my React Project , but I do not have any problem with Component extends, as you can see it implemented in the code normally.

So, the question is - what is the problem is? I already cannot figure out..

/* COMPONENT */

import React from 'react';
import AddTodo from '../../Actions/AddTodo'
import TodoFormAdd from '../../Containers/TodoFormAdd'

class TodoForm extends React.Component{   
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();

        let input = document.querySelector('input').value; 
        TodoFormAdd(this.props.store, input);  
        input = '';
    }

    render() {
        return (
            <form id="tp" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="Your text" />
                <button type="submit">Add todos</button>
            </form>
        );  
    }
}
export default TodoForm;

/* CONTAINER FOR A COMPONENT ABOVE */

import { connect } from 'react-redux';
import AddTodo from '../Actions/AddTodo'
import TodoForm from '../Components/TodoForm/TodoForm'

let TodoFormAdd = (store, input) => {
    store.dispatch(AddTodo(input));
}

export default connect()(TodoForm);

Solution

  • The problem is you are exporting a component from /Containers/TodoFormAdd in this line:

    export default connect()(TodoForm)
    

    It looks like you want to pass the dispatch to your component. You need to pass a mapDispatchToProps function to your connect function:

    const mapPropsToDispatch = dispatch => {
      return {
        todoFormAdd: input => dispatch(addTodo(input))
      }
    }
    
    connect(null, mapDispatchToProps)(TodoForm)
    

    Then from your component, you can call the dispatch.

    //TodoForm Component
    this.props.todoFormAdd(input)